Question

对于拥有响应式图像，我使用bootstrap class = img-responsive。这个班的确很完美。然而，它从一开始就使图像变小。我需要scale = 1，psd文件的确切大小。在css中我写道：

.img-responsive{
        display: block;
        height: auto;
        width: 100%;

    }

我的头脑中有：

<meta name="viewport" content="width=device-width, initial-scale=1">

但它仍然无效。谢谢！

Answer 1

您可以添加最大宽度和最小宽度。使用这些，您可以将图像告知特定点和最大值的最小宽度。我会发布这个评论作为评论，但我没有足够的代表。对不起，伙计们。

Answer 2

非常清楚地看到图像宽度为100％，但是如果你的图像缩小，这意味着这是因为图像容器。例如

.container {
 width:100%;
}
.img-container {
 width:50%;
}
.img {
width: 100%;
}

<div class="container">
  <div class="img-container">
    <img class="img" src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg"/>
  </div>
</div>

jsFiddle

现在，如果你想看到图像的真实大小，只需做这个改变::

将图片容器宽度设为100％

.img-container {
     width:100%;
    }

使用bootstrap创建响应式图像

2 个答案: