Html 显示图像全尺寸 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26033347/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
display image full size css
提问by sukhvir
I am trying to display this image in my blog full size : http://i.imgur.com/BruV8Hk.jpg
我正在尝试在我的博客中显示此图像的全尺寸：http: //i.imgur.com/BruV8Hk.jpg
However it gets cropped ... i don't know why. I have tried rechecking the .headerboundaries and I can't see where I would be limiting the size available for the image.
但是它被裁剪了......我不知道为什么。我试过重新检查.header边界，但我看不到在哪里限制图像可用的大小。
Here is the codepen for the site : http://codepen.io/anon/pen/grLED
这是该网站的代码笔：http://codepen.io/anon/pen/grLED
Please help
请帮忙
EDIT:
编辑：
Just to clarify .. I would like my .headercontainer to be big enough to house that image in full
只是为了澄清......我希望我的.header容器足够大以容纳完整的图像
EDIT 2:
编辑2：
so i just did this : http://codepen.io/anon/pen/vJyFnto get the desired result ... can it be done without all those <br>?
所以我只是这样做了：http: //codepen.io/anon/pen/vJyFn以获得所需的结果......没有所有这些可以完成<br>吗？
回答by Bilal
Add these properties to your .headerclass. But I am not sure if this'll work in old browsers.
将这些属性添加到您的.header类中。但我不确定这是否适用于旧浏览器。
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Update
更新
If your height is less then the image height, you will loose dimension ratios. In this case your image will be stretched. You can define width and height like this background-size: 300px 150px;as described here.
如果您的高度小于图像高度，您将失去尺寸比。在这种情况下，您的图像将被拉伸。您可以background-size: 300px 150px;按照此处所述定义宽度和高度。
Moreover you can use coverand containoptions with background-sizeproperty. As your container height is less then the image you have to rely on this otherwise set width height screw background image.
此外，您可以使用属性cover和contain选项background-size。由于您的容器高度小于图像，因此您必须依赖此设置的宽度高度螺钉背景图像。
For more reference please see this link.
如需更多参考，请参阅此链接。
回答by JakeSidSmith
Try setting the background-size.
尝试设置背景大小。
/* Always cover the container (not a lot of support) */
background-size: cover;
Or
或者
/* Fit width */
background-size: 100% auto;
Alternatively if you want it inside the div with absolutely no cropping you could set this to 'contain' or 'auto 100%' to fit the height.
或者，如果您希望它在绝对没有裁剪的 div 内，您可以将其设置为“包含”或“自动 100%”以适应高度。
Hope that helps. :)
希望有帮助。:)
回答by Siyam Kumar
Do you need image to be displayed like in this link?
您需要像此链接中那样显示图像吗？
http://codepen.io/anon/pen/grLED
http://codepen.io/anon/pen/grLED
body{
color: #202020; /*#3d3636 #fffaf0; #fdfdfd 8c8c8c*/
font-size:100%;
font-family: 'Maven Pro', sans-serif;
line-height:1.4em;
min-height:100%;
/*padding-left: 5%;*/
background: url('http://i.imgur.com/BruV8Hk.jpg');
background-repeat:no-repeat;
}
回答by ThatMSG
I've made a small example for you, take a look at this Linkit might help you out
我为你做了一个小例子，看看这个链接它可能会帮助你
There is an CSS3 property called
有一个 CSS3 属性叫做
background-size:cover;
that will do the magic :)
那会变魔术:)
Some more information can be found here: http://www.w3schools.com/cssref/css3_pr_background-size.asp
可以在此处找到更多信息：http: //www.w3schools.com/cssref/css3_pr_background-size.asp
