Css 如何使图像在较小的屏幕上具有100%的宽度？

我正在做一个新闻博客。我已经创建了我的主要文章卡片。卡片的左边有一个图像，卡片上有标题、简要描述、作者和日期等主要内容

当浏览器最大化时，一切正常（我在一台13英寸的笔记本电脑上）。当我开始调整浏览器的大小并使其变小时，一切都开始崩溃。图像没有占据整个宽度，右侧有大量空白

我尝试将图像宽度设置为

100%

，但似乎无法解决问题。我不知道是什么错了，为什么会这样。这只发生在这些物品卡片上。主页上的其他内容即使在较小的屏幕上也能正常工作

如果您有时间，您能解释一下发生了什么，以及如何解决这个问题吗？谢谢

截图：

大屏幕+屏幕

当我开始调整浏览器窗口的大小并使其变小时，它会执行以下操作：

最后是手机大小的屏幕：

HTML

<div class="card card-article">
        <div class="row no-gutters right-shadow-games">
            <div class="col-auto">
                <img alt="" class="img-fluid" src="//placehold.it/200x200"> <a class="article-tag games" href="#">Games</a>
            </div>
            <div class="col">
                <div class="card-block">
                    <div class="row">
                        <div class="col-md-12">
                            <h4 class="card-title"><a href="#">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</a></h4>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-9">
                            <p class="card-author"><a href="#">Author on Sep 29, 2017</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

---

对于乱七八糟的CSS，我绝对可以稍微清理一下。

发生的事情是，你的图像正好是200x200px，因此当你的页面改变形状时，它不能拉伸。您可以找到一个不同的图像（我不建议这样做-只是把它放在那里），或者您可以尝试在可变宽度的设备上添加另一个样式表的媒体查询，然后在这些设备上重置高度/宽度。

使用

col-md-4

对div进行图像换行

col auto

（请参阅fidle:）

.card文章{
边缘顶部：2倍；
边缘底部：5px；
盒影：0 2px 8px rgba（0,0,0,0.15）；
}
.卡片文章.卡片标题{
边缘顶部：15px；
左边距：15px；
右边距：10px；
字号：18px；
}
.卡片文章.卡片作者{
左边距：15px；
右边距：10px；
颜色：#8d8d8d；
字体大小：12px；
线高：1.4；
}
.卡片文章.卡片标题a{
颜色：黑色；
字号：600；
}
.卡片文章.卡片说明{
左边距：15px；
右边距：10px；
颜色：#8d8d8d；
字体大小：14px；
线高：1.4；
}

挑选一个黄色的桃子，它看起来像一个日落，有红色、橙色和粉色的皮毛，用牙齿把它剥下来。把它们沉入未成熟的

使用移动媒体查询，您可以获得100%的图像宽度

@media (max-width: 575px) {
.img-fluid{width:100%;}
}

---

在此，图像将在

640px

介质宽度处调整为

100%

宽度。我认为最好是将图像大小更改为更大的大小（按照100%的宽度点），以获得最大的图像清晰度

.card文章{
边缘顶部：2倍；
边缘底部：5px；
盒影：0 2px 8px rgba（0,0,0,0.15）；
}
.卡片文章.卡片标题{
边缘顶部：15px；
左边距：15px；
右边距：10px；
字号：18px；
}
.卡片文章.卡片作者{
左边距：15px；
右边距：10px；
颜色：#8d8d8d；
字体大小：12px；
线高：1.4；
}
.卡片文章.卡片标题a{
颜色：黑色；
字号：600；
}
.卡片文章.卡片说明{
左边距：15px；
右边距：10px；
颜色：#8d8d8d；
字体大小：14px；
线高：1.4；
}
.article-tag.games{
位置：绝对位置；
左：10px；
顶部：10px；
背景：红色；
填充物：2px 5px；
颜色：白色；
边界半径：4px；
}
.col自动调幅{
最大宽度：200px；
}
@介质（最大宽度：640像素）{
.col auto{
宽度：100%；
最大宽度：100%！重要；
}
.col自动调幅{
宽度：100%；
最大宽度：100%；
}
}

挑选一个黄色的桃子，它看起来像一个日落，有红色、橙色和粉色的皮毛，用牙齿把它剥下来。把它们沉入未成熟的

引导程序的哪个版本？？我使用的是4.1版，您想在小屏幕描述换行符上显示吗？您可以在小屏幕上使用引导程序类

col sm-

和

col-

。告诉我您的意思是什么不幸的是，问题似乎没有得到解决。另一位用户表示，200x200图像不够大，无法容纳手机大小屏幕的全宽。您希望图像在sm屏幕上全宽显示，这是正确的。正如你在这张照片上看到的，图像中有一个很大的缺口：当你说“找到一张不同的图像”时，你的意思是找到一张分辨率更高的照片吗？然后使用css调整这张大分辨率照片的大小，以适应不同的屏幕尺寸？我的意思是让你找到一个非方形的图像，这样你就可以舒展它，而不会让它看起来很奇怪

@media (max-width: 575px) {
.img-fluid{width:100%;}
}