图中图像的长宽比
P粉557957970
P粉557957970 2023-08-17 20:24:04
[CSS3讨论组]
<p>我有一个带有标题的图像,就像这样:</p> <pre class="brush:php;toolbar:false;">&lt;figure&gt; &lt;img src="image.jpg"/&gt; &lt;figcaption&gt;标题&lt;/figcaption&gt; &lt;/figure&gt;</pre> <p>我在CSS中还有<code>img{max-width:100%}</code>。</p> <p>我想同时设置图像的宽度和高度,并在宽度减小到其设置值以下时保持其纵横比。所以,我尝试了这样的代码:</p> <pre class="brush:php;toolbar:false;">&lt;figure&gt; &lt;img src="image.jpg" width="100" height="200" style="object-fit:contain"/&gt; &lt;figcaption&gt;标题&lt;/figcaption&gt; &lt;/figure&gt;</pre> <p>这大致是我想要的,但是当图像被'letterboxed'时,标题离图像底部的距离很远。</p> <p>有没有办法在保持标题紧贴图像底部的同时获得我想要的结果?</p>
P粉557957970
P粉557957970

全部回复(1)
P粉547362845

如果您正在使用object-fit: contain,那么图像的原始宽高比已经被保留,因为整个图像必须适应其父元素。所以,如果图像原始宽度为100px,高度为150px,并且您将图像设置为width: 100pxheight: 200px,图像的高度仍然为150px,但是在figure元素的顶部和底部会添加额外的25px的空间。

要解决这个问题,您只需要将高度设置为“auto”。

img {
  // 为了可读性,将您的样式声明移到这里
  width: 100px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

现在,如果您实际上想要定义宽度和高度,并强制图像符合这些尺寸,您应该使用除object-fit: contain之外的其他方法。您可以在这里了解其他选项,但也许您想设置figure元素的宽度/高度并让图像填充该空间。在这种情况下,您可以这样做:

figure {
    display: block;
    width: 100px;
    max-width: 100%;
    height: 200px;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: blue;
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号