图像-CSS、HTML

我试图显示图像，但我有几个问题

我的图片大小不一，我希望看到避免分辨率问题和布局空间问题的最佳方法

你看，我有更大/更小的图像，我需要它们以400×360像素的速度。。。有些人会被拉伸，有些人会变得怪异。（试着把一张大照片缩小成一张小照片）

如果你得到不同大小的图片，但在你的网站布局上有固定的空间，那么处理这些图片的最佳方法是什么

我尝试了可能的解决方案，但仍然有问题

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

---

我认为您应该使用css属性

背景大小


示例：
背景尺寸：封面

将覆盖您的400px乘以360px并裁剪溢出的图像。
我不太确定您所说的“图像变得扭曲和怪异”。如果您有不同比例的原始图像，那么为了防止失真，您应该使用

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;
}

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

这将保留原始比例，并有助于避免可能的失真。
你需要它们都是相同大小的，还是只需查看400x360像素的图片？这篇文章可能对你的问题有所帮助：这取决于你是如何获得这些图片的，以及你使用了多少图片。如果这些图像是你的，并且数量可控，那么最好使用photoshop、gimp或其他一些图像处理程序，并根据需要进行裁剪和缩放。我相信互联网上有很多裁剪工具。。。这里有一个让你开始：@Jack你看，我得到不同大小的图像，如果我得到一个更大的Img，我想添加图像并显示它。如果img大于500×360，则将其切割。（如果可能的话，可以将图像定位为你不需要的任何图像。F.E：我添加了一个房子的图像，它占据了图像的1/4，我想显示房子，但是有天空和一座大山。我只需要500 x 360px的图像来聚焦房子，裁剪其他所有东西。我希望我自己能解释一下A只需将包含div设置为所需的大小，并将overflow设置为hidden。如果要查看图像的左下角或右上角等部分，会发生什么情况？在这种情况下，不能将其居中。我尝试了您的解决方案，但无效。Img仍在拉伸。如果不希望拉伸，请使用背景大小：contain；相反