如何设置图像高度等于窗口的高度在CSS

https://codepen.io/Krimlen/pen/zwBmjV 如何设置图像高度等于窗口的高度在CSS

如何使两个图像的高度等于窗口宽度自动调整相机连高度？我真的搜索了很多，我找不到答案。

<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>

来源

2017-04-23 Krim

不知道如果我理解正确的，你找谁？：这个https://fiddle.jshell.net/fm8ne6o2/ 1/ –

删除垃圾代码https://fiddle.jshell.net/fm8ne6o2/4/ –

请尝试以下方法：

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"/>

来源

2017-04-23 10:52:20 itacode

这是惊人的，这正是我想要的，你能解释它是如何工作的吗？我也添加了最大宽度50％，因为它们是2张图片，现在它们完全灵活，我看到如果我从html和body中移除了100％魔法，我需要知道这部分是如何工作的 – Krim

我知道它是如何工作的唯一方法是

IMG {身高：100％}

或

IMG {身高：100％;宽度：汽车; }

让我知道这是否有帮助。从<img>

来源

2017-04-23 09:21:16 Roobix13

添加它，没有改变任何东西 – Krim

删除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; 
}

来源

2017-04-23 09:54:07

您可以使用视高，但你还需要将其显示为弯曲。看到下面的例子

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; 
}

来源

2017-04-23 10:07:00

如何设置图像高度等于窗口的高度在CSS

回答

相关问题