html - 图像 - CSS、HTML

Question

我试图显示图像，但我遇到了一些问题。

我的图像尺寸不同，我希望看看避免分辨率问题和布局空间问题的最佳方法是什么。

你看我有更大/更小的图像，我需要它们在 400 x 360 像素...有些被拉伸，有些变得奇怪。（尝试将大图像缩小为一个小图像）

如果您获得不同尺寸但在网站布局上有固定空间的图像，那么处理图像的最佳方法是什么？

我尝试了可能的解决方案，但它仍然延伸......

 #divDisplayingImg img{
   width:500px;
height:360px;
border:solid medium white;
border-radius:5px;
border-width:8px;
background-size: cover;
overflow:hidden;
   }

Answer 1

Try this

#divDisplayingImg
{
 width:500px;
 height:360px;        
 overflow:hidden;
}

#divDisplayingImg img
{
 width:100%;
 border:solid medium white;
 border-radius:5px;
 border-width:8px;
 background-size: cover;
 overflow:hidden;
}

Answer 2

我不太确定你所说的“图像被拉伸和怪异”。如果您有不同比例的原始图像，那么，为了防止失真，您应该使用

最大宽度：450px；最大高度：360px；

它将保留原始比率并有助于避免可能的失真。

Answer 3

我认为您应该使用 css 属性background-size
示例： background-size: cover;
将 400 像素覆盖 360 像素并裁剪溢出。