是否使用css调整图像大小而不使用裁剪方法


Resize image with css not using crop method?

我想用css调整图像大小,但我做不到。我们该怎么做?

<img class="img" style="width:200px;height:200px" src="<?php  echo $list[$i]->image; ?>"  alt="<?php echo $list[$i]->title ?>" title="<?php echo $list[$i]->title ?>" />

所以我想做宽度200和高度200像素,而不是图像大小。

谢谢。

您可以将其用作背景并使用以下属性:

background-repeat: no-repeat;
background-position: center center;
background-size: cover;

https://jsfiddle.net/alexndreazevedo/upn7jwfs/

如果你只想让图像最大宽度为200px或更高,你可以这样做:

<img class="img" style="max-width:200px;max-height:200px" src="<?php  echo $list[$i]->image; ?>"  alt="<?php echo $list[$i]->title ?>" title="<?php echo $list[$i]->title ?>" />

我将style="width:200px;height:200px"更改为style="max-width:200px;max-height:200px"

如果图像不是正方形,则最大尺寸将变为200px,而另一个尺寸将变小。

如果这没有意义,请告诉我。