html - 将图片放在我的 HTML 上时会失真

Question

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

有些图片是横向的，有些是纵向的。

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

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

然而，这往往会扭曲图片。

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

Answer 1

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