引导程序上的图像响应不足答案

【问题标题】：Image is not responsive enough on bootstrap引导程序上的图像响应不足
【发布时间】：2017-05-30 12:53:44
【问题描述】：

我正在使用 Bootstrap，我有一个大约 3000 x 2000 像素的大图像。我希望图像在加载宽度为 300 且高度为 300 像素的样式时响应。如何在不弄乱图像的情况下使图像具有响应性？

<li data-thumb-alt="" style="width: 350px: height : 300px; margin-right: 30px; float: left; display: block;">
    <div class="features">
        <img style="" class="img img-responsive" src="/Content/BusinessProfileImages/747f651f.jpg" alt="alternate text here" draggable="false">
        <div class="container_address">
            <a href="/Home/BusinessDetail?BusinessId=436&amp;AppointmentID=0">
        </div>
    </div>
</li>

.features img {
    margin: 0 auto;
    width: 100%;
    padding-buttom: 3px;
    margin-top: 1px;
    float:left;
}

【问题讨论】：

标签： css responsive-design frameworks image-scaling

【解决方案1】：

“img”标签旨在显示整个图像，因此它会尽其所能改变纵横比以适应您的界限。如果您需要使图像响应而不是其原始纵横比，则可以选择将其用作容器内的背景图像。这种方法的一个问题是，由于您没有保持原始纵横比，因此在切断图像边缘时会遇到一些问题。

以下是background-size 和background-position 上的一些有用链接，混合使用这些链接可以让您放大背景图像的中心，以保持尺寸响应，而不会扭曲纵横比。

【讨论】：