更新时间:2022-11-02 14:19:16
如果图片足够大,可以使用 max-width
和 max -height
而不是 width
和 height
。这将根据需要减小图像的大小,保持宽高比。
img {
max-width:70%;
max-height:70%;
}
为了居中,可以使用绝对定心技术...
.wrap {
position:relative;
}
img {
margin:auto;
position:absolute;
top:0; left:0; bottom:0; right:0;
}
html,body, image,.wrap {height:100%; padding:0; margin:0;}。wrap {position:relative;} img {max-width:70%; max-height:70%; margin:auto; position:absolute; top:0; left:0; bottom:0; right:0;}。text {margin-top:-50px; text-align:center; }
< div class =image> < div class =wrap> < img src =http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg> < / div>< / div>< div class =text>向下滚动< / div>
p>...或类似的固定中心化技术。
img {max-width:70%; max-height:70%; margin:auto;位置:固定; top:0; left:0; bottom:0; right:0;}。text {position:fixed; bottom:0;宽度:100%; text-align:center; }
< div class =image> < div class =wrap> < img src =http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg> < / div>< / div>< div class =text>向下滚动< / div>
p>但是,请注意,使用
max-width
和max-height
不会增加图像的大小来填充更大的屏幕。这可能是一件好事,因为它不会变得模糊。但是如果你想要它填充屏幕,即使图像较小,你可以使用
object-fit:contains
:img {
width:70%;
height:70%
object-fit:contains;
}
img {width:70 %;身高:70% object-fit:包含; margin:auto;位置:固定; top:0; left:0; bottom:0; right:0;}。text {position:fixed; bottom:0;宽度:100%; text-align:center; }
< div class =image> < div class =wrap> < img src =http://cdn.sstatic.net/***/img/favicon.ico> < / div>< / div>< div class =text>向下滚动< / div>
p>注意IE不支持
object-fit
。I am trying to do the following...
- Have an image that will always be horizontally and vertically centered on a page, whatever the screen size.
- Maintain aspect ratio on resize
- Have some text that will always be at the bottom of the viewport.
I have come up with two half solutions so far...
- Solution 1 - http://jsfiddle.net/5jphd/ - This works but does not maintain aspect ratio
- Solution 2 - http://jsfiddle.net/FAzBq/ - This is not vertically centered.
I am looking for a solution that combines both the above. Here is my code if you can't click the links above...
HTML
<div class="image"> <div class="wrap"> <img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg"> </div> </div> <div class="text">Scroll down</div>
CSS
//Solution 1 html, body {height: 100%} body { position: relative; padding: 0; margin:0; font-family: sans-serif; } .image { position: relative; left: 0px; height: 100%; background-position: 50% 50%; background-size: cover; background-attachment: scroll; text-align: center; } img { width: 70%; height: 70%; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .text { margin-top: -50px; text-align: center; } // Solution 2 - same as above but with .wrap class .wrap { overflow: hidden; position: relative; padding-top: 65%; }
Any help would be greatly appreciated.
If the image is big enough, you can use
max-width
andmax-height
instead ofwidth
andheight
. This will reduce the size of the image as necessary, maintaining the aspect ratio.img { max-width: 70%; max-height: 70%; }
To center it, you can use the absolute centering technique...
.wrap { position: relative; } img { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
html, body, .image, .wrap { height: 100%; padding: 0; margin: 0; } .wrap { position: relative; } img { max-width: 70%; max-height: 70%; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .text { margin-top: -50px; text-align: center; }
<div class="image"> <div class="wrap"> <img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg"> </div> </div> <div class="text">Scroll down</div>
... or the similar fixed centering technique.
img { max-width: 70%; max-height: 70%; margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; } .text { position: fixed; bottom: 0; width: 100%; text-align: center; }
<div class="image"> <div class="wrap"> <img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg"> </div> </div> <div class="text">Scroll down</div>
However, note that using
max-width
andmax-height
won't increase the size of the image to fill a bigger screen. This may be a good thing, because it won't become blurred.But if you want it to fill the screen, even if the image is smaller, you can use
object-fit: contain
:img { width: 70%; height: 70%; object-fit: contain; }
img { width: 70%; height: 70%; object-fit: contain; margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; } .text { position: fixed; bottom: 0; width: 100%; text-align: center; }
<div class="image"> <div class="wrap"> <img src="http://cdn.sstatic.net/***/img/favicon.ico"> </div> </div> <div class="text">Scroll down</div>
Note IE does not support
object-fit
yet.