gpt4 book ai didi

css - 在不使用 javascript 的情况下,如何在保持图像纵横比的同时具有最大高度和宽度的灵活 css 图像大小调整?

转载 作者:行者123 更新时间:2023-11-28 08:43:13 25 4
gpt4 key购买 nike

我真的以为这会在堆栈溢出的其他地方,但我搜索了很长时间却没有结果。如果我错过了,请原谅我。

我有一组图像需要尽可能大(宽度:容器元素的 100%),只要容器不会因为容器宽度而变得太宽或图像太高。需要保留纵横比。

我想我可以用

img { width: 100%; height: auto; max-width: 500px; max-height: 250px; }

当时的想法是,如果图像达到给定宽度和纵横比的最大宽度或最大高度,它将不再增长。实际上,这会导致图像宽度尽可能宽,但当图像太高时会破坏纵横比(将图像压缩到最大高度),而不是阻止图像变宽。

有没有更好的方法来解决这个问题?如果可能的话,我想避免使用 javascript。我的测试是在 Firefox 9 中进行的。

最佳答案

有点旧,但使用顶部或底部填充将保持纵横比。除以高度/宽度并将该百分比应用于填充顶部或底部。它有时会变得棘手,但它确实有效。

这是一篇关于它的好文章: http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

关于css - 在不使用 javascript 的情况下,如何在保持图像纵横比的同时具有最大高度和宽度的灵活 css 图像大小调整?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8967212/

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