css - 图像在引导时响应不够

Question

我正在使用 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;
}

Answer 1

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

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