Question

这是我的HTML代码。

  <div class="column">
        <div class="slider" id="main-slider">
            <div class="slider-wrapper">
                <img src="images/11.jpg" class="slide img-responsive">
            </div>
        </div>
    </div>

这是css部分。

img{
    border-color: white; border-radius: 8px;border: 1px solid #ddd;
    max-width: 100%;
    float: left; 
    margin: 0 5% 80px 0;
    width:100%;
    height:auto;
}

图片没有响应。我已经尝试在css中添加img-responsive类和设置高度为auto。当我减小浏览器大小时，它不会缩小。

Answer 1

Bootstrap 4使用img-fluid代替img-responsive。阅读其文档here

Answer 2

我已经把你的代码放到JSFiddle中，没有img-responsive类的图像，一切似乎都运行良好？

<div class="column">
    <div class="slider" id="main-slider">
        <div class="slider-wrapper">
            <img src="https://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed2.jpg">
        </div>
    </div>
</div>

https://jsfiddle.net/zhg95pa8/

删除课程，看看是否有效。

Answer 3

尝试替换此代码

img {
    border-color: white;
    border-radius: 8px;
    border: 1px solid #ddd;
    max-width: 100%;
    margin: 0 5% 80px 0;
    height: auto;
}

图像没有响应。我已经尝试在css中添加img-responsive类和设置高度为auto

3 个答案: