如何使 div 响应也适用于旧浏览器

Question

假设我在 div 中有图像，我指定 div 宽度 100%，但图像大小没有响应。

这是示例。看看并指导我我需要为 div 添加什么样的 CSS，结果 div 里面的任何东西都会根据屏幕尺寸做出响应。

<div class="headerCarouselwrapperOuter" style="width: 100%">
        <div class="headerCarouselwrapper">
            <img src="Images/new-bba-header-image1dyna.jpg" alt="" />
            <img src="images/new-bba-header-image2dyna.jpg"  alt="" />
            <img src="images/new-bba-header-image3dyna.jpg"  alt="" />
            <img src="images/new-bba-header-image4dyna.jpg"  alt="" />
        </div>
    </div>

Answer 1

#headerCarouselwrapperOuter, .headerCarouselwrapper {width:100%;}
.headerCarouselwrapper img {display:block;width:100%;}

将此添加到您的 CSS，这应该会使您的图片具有响应能力

Answer 2

默认 div 宽度为 100%，使图像响应提及

img{
  max-width:100%;
  height:auto;
}

在你的 css.

如何使 div 响应也适用于旧浏览器

How to make a div responsive which works in old browser too

html

css

responsive-design