如何在CSS中将图像高度设置为等于窗口高度
[英]how to set image height to be equal to window's height in CSS
问题描述
https://codepen.io/Krimlen/pen/zwBmjV
如何使两个图像的高度等于窗口和宽度以自动调整高度？ 我确实搜索了很多，却找不到答案。
<body>
<div id="container">
<img src="https://s-media-cache-ak0.pinimg.com/originals/36/ef/af/36efafe91fddde518cba85e974c7e8c8.jpg" class="home" alt="Makeup Artists"
class="home"/><img src="https://s-media-cache-ak0.pinimg.com/originals/36/ef/af/36efafe91fddde518cba85e974c7e8c8.jpg" alt="Photographers" class="home"/>
</div>
<img src="images/logo.png" alt="Satch" id="logo"/>
</body>
<style>
html, body{
margin: 0;
padding: 0;
}
#container{
text-align: center;
}
</style>
4 个解决方案
解决方案1
1 2017-04-23 09:54:07
从<img>删除src =“ ..”并将其应用于CSS
img.home {
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/36/ef/af/36efafe91fddde518cba85e974c7e8c8.jpg');
background-size: 100% 100%;
position: absolute;
}
解决方案2
0 2017-04-23 09:21:16
我知道它如何工作的唯一方法是
img {高度：100％}
要么
img {高度：100％; 宽度：自动; }
让我知道是否有帮助。
解决方案3
0 2017-04-23 10:07:00
您可以使用视口高度，但也需要将其显示为flex。 参见下面的例子
img {
height: 100vh;
display: flex;
flex-direction: row;
}
那应该行得通，您可能还想将z-index添加到您的容器中，以便图像位于其后。 像这样。
#container {
text-align: center;
position: relative;
z-index: 100;
}
img {
height: 100vh;
display: flex;
flex-direction: row;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
解决方案4
0 已采纳 2017-04-23 10:52:20
请尝试以下操作：
html, body { height: 100%; } .img_wrap { height: 100%; text-align: center; } .img_wrap img { width: auto; height: auto; max-height: 100%; }
<div class="img_wrap"> <img src="https://s-media-cache-ak0.pinimg.com/originals/36/ef/af/36efafe91fddde518cba85e974c7e8c8.jpg" class="home" alt="Makeup Artists" class="home"/><img src="https://s-media-cache-ak0.pinimg.com/originals/36/ef/af/36efafe91fddde518cba85e974c7e8c8.jpg" alt="Photographers" class="home"/> </div> <div id="container"><img src="https://s-media-cache-ak0.pinimg.com/originals/36/ef/af/36efafe91fddde518cba85e974c7e8c8.jpg" alt="Photographers" class="home"/> </div> <img src="images/logo.png" alt="Satch" id="logo"/>
CSS / HTML5：如何将div标签高度调整为等于浏览器窗口的当前高度？
[英]CSS/HTML5: How to adjust div tag height equal to browser window's current height?
如何设置输入区域高度等于占位符段落的高度
[英]How to set the input area height equal to the placeholder paragraph's height
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.