Question

输出

原始图像尺寸：463像素X 339像素

由于版权问题，我删除了图片。

HTML

<div class="col-md-4">
  <div class="item-block event-details" id="video-container">
     <img src="/Resources/images/6b0c5d49-9a76-4a09-afb7-5bfa2ed508f7.jpg" class="img-responsive">
  </div>

CSS

.item-block.event-details {
position: relative;
overflow: hidden;
height: 214px;
}

.item-block {
color: #4b4e4e;
border-radius: 4px;
border: 1px solid #d4d4d4;
box-shadow: 0px 1px 1px #b0b6b6;
position: relative;
margin-bottom: 30px;
}

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

问题： 你能告诉我为什么会这样吗？我需要在父母div尺寸上面显示整个图像。但是它没有发生。你能告诉我为什么吗？换句话说，图像不适合父div。

Answer 1

如果您的父级div由于某种原因需要达到该高度，您可以将max-width和max-height都设置为100%

.img-responsive {
    display: block;
    margin: 0 auto; /* to center the image horizontally in parent div */
    max-width: 100%;
    max-height: 100%;
}

Answer 2

我认为你应该在.img-responsive css类中做相反的事情。让我们尝试一下：

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

Answer 3

不需要写

最大宽度：100％; 如果你想要图像响应，你可以写

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

如果你使用bootstrap然后忘了所有。你只需要添加类.img-responsive到img标签。 Demo

图像没有响应

3 个答案: