放在我的HTML上时，图片会被扭曲

Question

目前，图片正在我的网站中放入具有给定宽度和高度的div容器中。

有些照片是风景照片，有些照片是肖像照片。

目前，我使用CSS为图像提供静态宽度和高度，以便在其容器内正确定位。

.winner .winner-image img {
    height: 159px;
    width: 143px;
}

然而，经常注意这会扭曲图片。

在不扭曲图像的情况下显示图像的推荐方法是什么？最佳做法？

Answer 1

如果没有一些服务器端代码来实际确定图像的高度和宽度，最好的想法是设置EITHER的高度或宽度，但不能同时设置两者。这将导致图像按比例调整大小。您选择约束的维度取决于您的网站布局。

Answer 2

为了不扭曲它们，图像必须具有其原始高度和宽度（或比例值）。只需指定其中一个值，大多数现代浏览器都会按比例缩放图像。

Answer 3

您可以添加固定大小的外部元素（span或div），并使该元素不显示溢出的内容。

为了保证图像的尺寸可以重新设置，您还可以设置图像的高度或宽度值，与包装div值匹配（必须只分配一个值，这样图像不会失真。

<style>
  .img-wrapper {display:inline-block; height:159px; overflow:hidden; width:153px;}
  .img-wrapper img {height:159px;}
</style>

<div class="img-wrapper">
  <img src="">
</div>

Answer 4

最好的方法是在上传到服务器后创建图像的缩略图。缩略图应为159x143像素，但如果您现在需要显示图像，可以设置div固定宽度，使用css属性“overflow：hidden;”并设置图像的高度。不要触摸宽度

Answer 5

如果重要的是所有图像都以相同的尺寸显示，并且您不想扭曲它们，则必须裁剪它们以获得最佳效果。否则，您可以将图像包装在div中，设置div的高度和宽度并隐藏溢出，或者使用图像作为div的背景。
如果图像的高度和宽度可能不同，那么请使用已经提到的解决方案，即设置高度或宽度。