流体容器中包含的流体图像
流体容器中包含的流体图像
提问于 2015-09-25 06:28:25
我有一个具有最大高度和宽度约束的图像包装器(在本例中为300x200)，并且我尝试在容器中放置一个符合这些约束的流体图像。
图像的宽度按预期缩放，但是图像的高度总是溢出到父div之外。让这张图片仅用CSS就能适当缩放的正确方法是什么？
.container {
max-width: 500px;
overflow: hidden;
background-color: #eef;
margin: 0 auto;
}
.figure-image-wrapper {
max-width: 300px;
max-height: 200px;
margin: 0 auto;
}
.figure-image {
max-width: 100%;
height: auto;
}
.figure-caption {
text-align: center;
}<div class="container">
<figure class="figure">
<div class="figure-image-wrapper">
<img src="//placehold.it/700x700" class="figure-image"/>
</div>
<figcaption class="figure-caption">This is my caption. It's expect to span beyond the width of the image. The image above should scale within a 300x200 .figure-image-wrapper</figcaption>
</figure>
</div>
回答 2
Stack Overflow用户
发布于 2015-09-25 06:41:31
这对你来说应该是可行的：
.figure-image-wrapper {
max-width: 300px;
max-height: 200px;
margin: 0 auto;
text-align: center;
}
.figure-image {
max-width: inherit;
max-height: inherit;
}Stack Overflow用户
发布于 2015-09-25 14:38:47
啊哈！诀窍是只让图像的max-height从父包装器继承：
.container {
max-width: 500px;
overflow: hidden;
background-color: #eef;
margin: 0 auto;
}
.figure-image-wrapper {
max-width: 300px;
max-height: 200px;
margin: 0 auto;
text-align: center; /* Added: Center the image */
}
.figure-image {
max-width: 100%;
/* Removed: height: auto; */
max-height: inherit; /* Added */
}
.figure-caption {
text-align: center;
}<div class="container">
<figure class="figure">
<div class="figure-image-wrapper">
<img src="//placehold.it/700x700" class="figure-image"/>
</div>
<figcaption class="figure-caption">This is my caption. It's expect to span beyond the width of the image. The image above should scale within a 300x200 .figure-image-wrapper</figcaption>
</figure>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32771955
复制相关文章
相似问题
腾讯云开发者
