小编典典

CSS:在保持纵横比的同时保持 100% 的宽度或高度?

all

目前,使用 STYLE,我可以在高度上使用width: 100%auto(反之亦然),但我仍然无法将图像限制在特定位置,分别是太宽或太高。

有任何想法吗?


阅读 91

收藏
2022-06-30

共1个答案

小编典典

如果您只在图像上定义一个维度,则始终会保留图像纵横比。

图像比您喜欢的更大/更高的问题吗?

您可以将它放在设置为图像所需的最大高度/宽度的 DIV 中,然后设置溢出:隐藏。这将裁剪超出您想要的任何内容。

如果图像是 100% 宽和高度:自动并且您认为它太高,那是因为保留了纵横比。您需要裁剪或更改纵横比。

请提供有关您具体要完成的工作的更多信息,我会尽力提供更多帮助!

-– 根据反馈进行编辑 —

你熟悉max-widthmax-
height
属性吗?你总是可以设置那些。如果您没有设置任何最小值并且设置了最大高度和宽度,那么您的图像将不会失真(将保留纵横比)并且它不会大于最长并达到其最大值的任何尺寸。

2022-06-30