我有一个场景,其中不同尺寸的图像出现在页面宽度为50%的列中。
在列宽超过图像原始宽度的大屏幕上,图像应呈现为原始宽度,同时仍然是流动的。
图像尺寸不同(即横向与纵向),因此不能将单个宽度或高度应用于img元素。我可以将父元素约束到与将显示的最大图像宽度匹配的最大宽度,但是一旦流动,宽度较小的图像会扩展得太宽。
基本结构是:
<div class="column">
<figure>
<img>
</figure>
</div>
使用这个CSS:
.column {width:50%;}
.column figure {
display:block;
margin:0 auto;
width:100%;
max-width:800px; /* the largest image width */
text-align: center; /* to center images of lesser width */
}
.column img {?}
我可以向指示方向的img元素添加数据属性,使用此属性来应用max-width,但这需要更多的工作来进行网站编辑,我需要避免这种情况。因此,我寻求一个只有CSS的解决方案......但我被卡住了。
有什么想法吗?
答案 0 :(得分:0)
如何再次使用max-width
,允许图像完全展开到其容器的宽度,但不是更大?类似的东西:
.column img {
max-width: 100%;
}
这将允许图像根据需要进行响应 - 使用其父级的大小进行缩放,但绝不会超过其原始宽度。这是一个带有一些随机图像的演示 - 注意当给定足够的空间时,原生较小和较大的图像如何停在不同的宽度:
.column {
width: 50%;
}
.column figure {
display: block;
margin: 0 auto;
width: 100%;
max-width: 800px;
/* the largest image width */
text-align: center;
/* to center images of lesser width */
}
.column img {
max-width: 100%;
}
&#13;
<div class="column">
<figure>
<img src="http://www.ltsgrill.com/wp-content/uploads/2014/09/red_lobster.jpg" />
</figure>
</div>
<div class="column">
<figure>
<img src="http://www.mjseafood.com/_assets/400x300/Crayfish.jpeg" />
</figure>
</div>
&#13;