Html 在div响应css中生成图像

我在

div

上有一个图像。图像是通过

CMS

动态添加的

<div class="banner_page">
       <img src="banner.jpg" />

</div>

一旦我开始挤压浏览器，图像就会超过水平条，我需要水平移动才能查看图像。如何使其响应？

添加CSS：

.banner_page img{
    width:100%;
}

这会将

img

宽度限制为与父元素

.banner\u page\u img

---

尝试使用

.banner\u page img{width:100%；}

，这样它将填充其父对象

如果您还想约束比例，请添加以下内容：

.banner_page img{
    width: 100%;
    height: auto;
}

---

一个简单的

宽度：100%

在图像上应该足够了，不是吗？嗯，是的，但是在移动屏幕上，图像被挤压太多，失去了它的质量。我们能应付吗？

.banner_page img{
    width: 100%;
    height: auto;
}