2014-10-01 77 views
-2

我正在制作一个项目,在其中使用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

我不希望它得到STRECH,而在FB上载与谷歌及其作品OSM

+0

我们可以看到一些标记吗?仅凭这一点就很难评估除了其他人已经提供的其他选项。 – Bradley 2014-10-01 18:14:43

+0

http://www.tiikoni.com/tis/view/?id=479959b – Jenni 2014-10-01 18:20:36

回答

0

根据你的链接,这个CSS固定的问题。

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

center { 
width:100%; 
} 

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

如果我把高度:自动;否则它会溢出,其他div将开始疯狂行为:P。我只是想不要溢出它,不拉伸.. – Jenni 2014-10-01 18:26:41

+0

在这种情况下,无论你想要的高度,将中心设置为明确的高度,所以center {width:100%; height:530px; overflow:hidden;}隐藏的溢出将会阻止图像进一步发展,另外一种选择是将图像设置为中心的背景图像并将其设置为背景大小:封面,这将是最好的方式来达到你所寻找的效果 – Bradley 2014-10-01 18:28:36

+0

是的,谢谢你真棒。你也可以给一些教程或链接改变背景位置请 – Jenni 2014-10-01 18:37:13

1

要么设置height530px或设置width100%,不做都在一起。

图片不会被拉伸并保持其宽高比。 :)

+0

我不能设置其高度自动:( – Jenni 2014-10-01 18:12:51

1

此:height="530px" width="100%"

你说的是照片拍摄其母公司的整个宽度,并正好530px高。你可能想要的是图像上的高度不受限制,但是其父母的高度限制为overflow: hidden

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

+0

什么解决方案呢 – Jenni 2014-10-01 18:10:00

+0

我不能设置其高度自动:( – Jenni 2014-10-01 18:12:29