图片在放置到“我的HTML”中时被扭曲

目前，图片被放置在我的网站的一个div容器内，具有给定的宽度和高度

有些画是风景画，有些是肖像画

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

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

然而，这往往会扭曲画面

---

在不扭曲图像的情况下，建议使用什么方法显示图像？最佳实践？

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

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

最好的方法是在上传到服务器后创建图像的缩略图。缩略图应该是159x143像素，但若你们现在需要显示图像，你们可以用css属性“overflow:hidden”设置div固定宽度，只需设置图像的高度。不要触摸宽度

如果所有图像都以相同的大小显示很重要，并且您不想扭曲它们，则必须裁剪它们以获得最佳效果。否则，您可以将图像包装在div中，设置div的高度和宽度并隐藏溢出，或者将图像用作div的背景。

---

如果图像的高度和宽度可能不同，则使用前面提到的解决方案，即设置高度或宽度。

您可以添加固定大小的外部元素（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>

.img包装{显示：内联块；高度：159px；溢出：隐藏；宽度：153px；}
.img包装器img{高度：159px；}

@Baszz：使用我当前使用的css示例进行编辑。