How to make my content responsive to screen size both horizontally and vertically?
Question
I try to make a page with container and content "responsive" that reduces with the window, especially the height.
Currently my code allows to reduce width but not height. It's possible to do that ?
My current code : 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>
Thanks for your help.
2 answers
solution1
1 2019-06-06 17:36:18
The images scale only on horizontal re-size because they are sized with viewport width units ( vw ).
img {
width: 22.5vw;
height: 35vw;
}
If you wanted them to re-size on vertical re-size, then you would use viewport height units ( vh ).
If you want them to scale on both vertical and horizontal re-size , then try vmin or vmax units.
https://drafts.csswg.org/css-values/#viewport-relative-lengths
solution2
0 ACCPTED 2019-06-07 10:54:15
Problem solved, here we use different properties to manage height and width.
Demo here .
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%;
}
Thanks for your help :-)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.