How to adapt CSS image container to different browser sizes
Question
I am currently working on a website project with some friends and we've made (with the help of SO) an image container for our home page, but we'd like to adapt it to most screen sizes (like 1920x1080, 1366x768, etc. so 16:9 I guess, haven't though much about tablets and smartphones yet).
We've tried using the solution mentioned here ( Automatically resize images with browser size using CSS ) but it just scales the images really weirdly and not based on the browser, just shrinks them inside the container.
We also tried css get height of screen resolution but we got some weird results as well.
* { margin: 0; padding: 0; } body { background: #ccc; font-family: arial, verdana, tahoma; } /*Time to apply widths for accordian to work Width of image = 1840px total images = 3 so width of hovered image = 1840px width of un-hovered image = 40px - you can set this to anything so total container width = 1840 + 40*2 = 1920px; default width = 1920/3 = 640px; */ .accordian { width: 1920px; height: 1000px; overflow: hidden; /*Time for some styling*/ margin: 0px auto; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } /*A small hack to prevent flickering on some browsers*/ .accordian ul { width: 2000px; /*This will give ample space to the last item to move instead of falling down/flickering during hovers.*/ } .accordian li { position: relative; display: block; width: 640px; float: left; border-left: 1px solid #888; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); /*Transitions to give animation effect*/ transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; /*If you hover on the images now you should be able to see the basic accordian*/ } /*Reduce with of un-hovered elements*/ .accordian ul:hover li { width: 40px; } /*Lets apply hover effects now*/ /*The LI hover style should override the UL hover style*/ .accordian ul li:hover { width: 1840px; } .accordian li img { display: block; } /*Image title styles*/ .image_title { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 1840px; } .image_title a { display: block; color: #fff; text-decoration: none; padding: 60px; font-size: 30px; }
<!doctype html5> <head> <title>CdS Home</title> <link rel='stylesheet' href='index.css' /> </head> <div class="accordian"> <ul> <li> <div class="image_title"> <a href="#">Event 1</a> </div> <a href="#"> <img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.wallpaperup.com%2Fuploads%2Fwallpapers%2F2015%2F01%2F30%2F606369%2F5510b472cf9126e305bb941e8ec8d9e8.jpg&f=1" /> </a> </li> <li> <div class="image_title"> <a href="#">Event 2</a> </div> <a href="#"> <img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.betaseries.com%2Fimages%2Ffonds%2Foriginal%2F9296_1415901083.jpg&f=1" /> </a> </li> <li> <div class="image_title"> <a href="#">Event 3</a> </div> <a href="#"> <img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.wallpaperup.com%2Fuploads%2Fwallpapers%2F2015%2F01%2F30%2F606369%2F5510b472cf9126e305bb941e8ec8d9e8.jpg&f=1" /> </a> </li> </ul> </div> And here is the CSS file /*Now the styles*/
And here is a JSFiddle link with the code running - https://jsfiddle.net/qvpy07vd/
How should we adapt the code so that it adapts to most common screen sizes? Do we have to do a different code for every different screen?
1 answers
solution1
1 ACCPTED 2016-09-05 16:54:59
Here is a jsFiddle but i suggest you to try it in separate file so you can adjust screen sizes, it worked for me, Good Luck.
* { margin: 0; padding: 0; } .accordian ul{ width:auto;} .accordian { width: auto; overflow:hidden; height: 100%; margin: 0px auto; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } .accordian li { width: calc(95% / 3); position: relative; display: inline-block; height:100%; border-left: 1px solid #888; transition: all 0.5s ease 0s; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; see the basic accordian*/ } .accordian ul:hover li{ width:10%; } .accordian ul li:hover { width:calc( 95% - (10%*3)); background-color:rgba(0,0,0,0.5); } .accordian li img { display: block; width:auto; height:100%; } .image_title { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 1840px; } .image_title a { display: block; color: #fff; text-decoration: none; padding: 1%; font-size: 30px; }
<div class="accordian"> <ul> <li> <div class="image_title"> <a href="#">Event 1</a> </div> <a href="#"> <img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.wallpaperup.com%2Fuploads%2Fwallpapers%2F2015%2F01%2F30%2F606369%2F5510b472cf9126e305bb941e8ec8d9e8.jpg&f=1" /> </a> </li> <li> <div class="image_title"> <a href="#">Event 2</a> </div> <a href="#"> <img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.betaseries.com%2Fimages%2Ffonds%2Foriginal%2F9296_1415901083.jpg&f=1" /> </a> </li> <li> <div class="image_title"> <a href="#">Event 3</a> </div> <a href="#"> <img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.wallpaperup.com%2Fuploads%2Fwallpapers%2F2015%2F01%2F30%2F606369%2F5510b472cf9126e305bb941e8ec8d9e8.jpg&f=1" /> </a> </li> </ul> </div>
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.
Related Question
How to adapt my css code to all screen sizes
How to adapt border-radius on different screen sizes
How to adapt image size for small and full screen sizes?
Adapt image to container size
Different image sizes in a fixed sized container
How adapt an image into a geometric figure in html and css?
CSS: How to make div adapt to image size?
fix for image size in different browser sizes
Css image wont adapt
Why isn't image 100% and how to I make it adapt to browser?
Related Tags