如何設置圖像高度等於窗口的高度在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

回答

相關問題