[英]How to make my content responsive to screen size both horizontally and vertically?
我嘗試使包含容器和內容的頁面“響應”成隨窗口減小，尤其是高度減小的頁面。
目前，我的代碼允許減小寬度，但不能減小高度。 有可能這樣做嗎？
我當前的代碼： https : //jsfiddle.net/u1Ld5r7v/1/
html, body { margin: 0; padding: 0; height: 100vh; width: auto; } body { height: 100%; overflow: hidden; } main { display: flex; } img { width: 22.5vw; height: 35vw; margin: 0; object-fit: cover; } .wrapper { display: flex; } .list { height: 100vh; display: flex; flex-wrap: nowrap; overflow-x: auto; align-items: center; padding: 0; } .list a { margin: 0%; padding: 0 4%; }
<body> <main class="wrapper"> <div class="list"> <a href="#"><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/01/af2.png"></a> <a href="#"><img src="https://www.wampstore.com/store/image/cache/data/Wamp/Products/Vallejo/Flat%20Blue-900x900.jpg"></a> <a href="#"><img src="https://www.craftmasterpaints.co.uk/images/colours/decorative-flat-colour/Orange.jpg"></a> <a href="#"><img src="https://www.craftmasterpaints.co.uk/images/colours/decorative-flat-colour/Pink.jpg"></a> <a href="#"><img src="https://i.pinimg.com/originals/bf/48/a7/bf48a70ec34fbcb3d71f3c685e98f95b.jpg"></a> <a href="#"><img src="https://emmanuel.info/wp-content/uploads/2018/12/rawpixel-577494-unsplash.jpg"></a> </div> </main> </body>
謝謝你的幫助。
圖像僅按水平調整大小縮放，因為它們以視口寬度單位 （ vw ）調整大小。
img {
width: 22.5vw;
height: 35vw;
}
如果希望它們在垂直方向上重新調整大小，則可以使用視口高度單位 （ vh ）。
如果希望它們在垂直和水平調整大小上都可以縮放 ，請嘗試使用vmin或vmax單位。
https://drafts.csswg.org/css-values/#viewport-relative-lengths
問題已解決，這里我們使用不同的屬性來管理高度和寬度。
演示在這里 。
HTML
<body>
<main class="wrapper">
<div class="list">
<a href="#"><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/01/af2.png"></a>
<a href="#"><img src="https://www.wampstore.com/store/image/cache/data/Wamp/Products/Vallejo/Flat%20Blue-900x900.jpg"></a>
<a href="#"><img src="https://www.craftmasterpaints.co.uk/images/colours/decorative-flat-colour/Orange.jpg"></a>
<a href="#"><img src="https://www.craftmasterpaints.co.uk/images/colours/decorative-flat-colour/Pink.jpg"></a>
<a href="#"><img src="https://i.pinimg.com/originals/bf/48/a7/bf48a70ec34fbcb3d71f3c685e98f95b.jpg"></a>
<a href="#"><img src="https://emmanuel.info/wp-content/uploads/2018/12/rawpixel-577494-unsplash.jpg"></a>
</div>
</main>
</body>
CSS
html,body {
margin: 0;
padding: 0;
height: 100vh;
width:auto;
}
body {
height: 100%;
overflow: hidden;
}
main {
display: flex;
}
img {
width: 45vmin; /*here we use vmin rather than vh or vw*/
height: 70vmin; /*here we use vmin rather than vh or vw*/
margin: 0;
object-fit: cover;
}
.wrapper {
display: flex;
}
.list {
width: 100vw;
height: 100vh; /*here we add height proprietie !important!*/
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
padding: 0;
align-items: center;
}
.list a {
margin: 0%;
padding: 0 4%;
}
謝謝你的幫助 ：-）
如何使背景不僅在垂直或水平方向都響應，而且在這兩者上都響應？
[英]How to make a background responsive not only vertically or horizontally but both?
如何在我的網頁中垂直排列水平排列的部分，以使我的頁面在設備上響應
[英]How can I arrange horizontally arranged sections, in my web page, as vertically so as to make my page responsive on devices
響應圖像可以垂直和水平放置在容器中嗎？ （問題的屏幕截圖）
[英]Responsive images to fit in container both vertically and horizontally ? (screenshots of issue)
在響應父節點上始終水平和垂直居中div
[英]Centering a div both horizontally and vertically at all times on a responsive parent
如何在右邊的內容上制作圖像，並在較小的屏幕尺寸時響應？
[英]How to make image on left content on right and responsive when at smaller screen size?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.