在div响应css中制作图像

Question

我在div上有一张图片。该图片是通过CMS动态添加的。

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

</div>

CSS：

.banner_page{
   height: 200px !important;
   left: 50%;
   max-width: 1920px !important;
   top: 0;
   position: relative;
   margin-left: -993px;
   width: 100% !important;
}

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

Answer 1

添加CSS：

.banner_page img{
    width:100%;
}

这会将img宽度限制为与父元素.banner_page_img

可用的宽度相同

Demo Fiddle

Answer 2

尝试使用.banner_page img { width: 100%; }，然后填写它的父母

Answer 3

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

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