我有一个场景,其中不同尺寸的图像出现在页面宽度为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的解决方案......但我被卡住了 .
有任何想法吗?
1 回答
如何再次使用
max-width
,允许图像完全扩展到其容器的宽度,但不是更大?就像是:这将允许图像根据需要进行响应 - 使用其父级的大小进行缩放,但绝不会超过其原始宽度 . 这是一个带有一些随机图像的演示 - 请注意当给定足够的空间时,原生较小和较大的图像如何停止在不同的宽度: