图片在放置到我的HTML上时被扭曲

Question

目前，图片正被放置到我的网站中的一个给定宽度和高度的div容器中。

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

目前我给图像一个静态的宽度和高度，使用CSS在它的容器中正确地定位它。

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

然而，这往往比注意到的更扭曲情况。

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

Answer 1

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

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>