html - 在 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