图片 - CSS，HTML

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

我的图片大小不同，我希望看到什么是避免解决方案问题和布局空间问题的最佳方法。

你看，我已经得到了大/小图片，我需要他们以400为640x360像素。有些被拉伸和一些得到奇怪的。（尝试瘦身大图像分割成一个小的一个）

是什么处理图像的最佳方式是，如果您获得大小不同但网站布局上有固定空间的图像？

我想什么可能的解决方案，它仍然口延伸......

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

来源

2013-10-08 user1876553

你需要它们都是相同的大小，或只是查看其中的400x360像素 – Jacques

这篇文章可能对您的问题有帮助：http://stackoverflow.com/questions/1733006/css-force-image-width-并且不需要拉伸 – abracassabra

这取决于您如何获取这些图像以及您正在处理的图像数量。如果图像是你的，你有一个可管理的数量，你最好的选择是使用Photoshop，GIMP，或其他图像处理程序和作物和规模，你认为合适。我确定互联网上有大量的裁剪工具...下面是一个让你开始使用的工具：http：//www.fotor.com/ –

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

max-width：450px;最大高度：360像素;

它将保持原始比率并有助于避免可能的扭曲。

来源

2013-10-08 18:11:07

我认为你应该使用CSS属性background-size
例子：background-size: cover;
将覆盖你400像素为640x360像素和裁剪溢出。

来源

2013-10-08 16:06:27

我试过你的解决方案， t工作Img的仍然streching – user1876553

如果你不想它伸展，使用background-size：contains;而不是。 –

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

来源

2013-10-08 17:30:00 NikeshPathania

图片 - CSS，HTML

回答

相关问题