gpt4 book ai didi

html - 强制图像适合并保持纵横比

转载 作者:技术小花猫 更新时间:2023-10-29 12:56:25 25 4
gpt4 key购买 nike

我想要一个图像填充其容器宽度的 100%,并且我希望它有一个 max-heigth 属性设置,所有这些保持纵横比但允许丢失图像的任何部分。

img {
max-height:200px;
width:100%;
}

我知道可以用 background-size 做类似的事情属性,但我想将其设为内联 <img>标签。

知道如何使用 CSS 实现这一点吗?还是 javascript?

最佳答案

你可以试试 CSS3 object-fit ,查看浏览器支持 tables

CSS3 object-fit/object-position Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio), where object-position allows the object to be repositioned like background-image does.

JSFIDDLE DEMO

.container {
width: 200px; /*any size*/
height: 200px; /*any size*/
}

.object-fit-cover {
width: 100%;
height: 100%;
object-fit: cover; /*magic*/
}
<div class="container">
<img class="object-fit-cover" src="/image/UJ3pb.jpg">
</div>


相关信息:

关于html - 强制图像适合并保持纵横比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34713763/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com