解决图片拉伸

Question

我正在制作一个项目，我在其中使用 Google+ 之类的封面图片。 大约全屏显示，但当我上传小尺寸图片或超大尺寸图片时，它会在预览中拉伸或压缩。

我用来装在盒子里的简单标签是
<img src="coverphotos/1291384_4846629064030_1548133592_o.jpg" height="530px" width="1024px" style="border-width: 0px; margin-top:-4px">

非常非常重要。我想在我的项目上制作封面图片，但我很恼火，因为它会拉伸，让图片变得丑陋，Facebook、Google+ 如何在不拉伸的情况下上传封面图片？

预览。 http://www.tiikoni.com/tis/view/?id=479959b

我不想让它伸展，同时在 fb 和谷歌上上传它的作品 osm

Answer 1

将height 设置为530px 或将width 设置为100%，不要同时使用。

图片不会被拉伸，并会保持其纵横比。 :)

Answer 2

这个：height="530px" width="100%"

您是在告诉图片采用其父级的全宽，并且高度正好为 530 像素。您可能想要的是图像上不受限制的高度，但在其父级上使用overflow: hidden 限制高度。

看看这篇文章：Perfect Full Page Background Image

Answer 3

根据您的链接，这个 css 解决了这个问题。

body {
 width:100%;
 margin: 0;
}

center {
 width:100%;
}

center img {
 width:100%;
 height: auto;
}