Iocust Iocust - 3 months ago 6
CSS Question

How to adapt CSS image container to different browser sizes

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?

Answer

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>