CODEWITHSUNDEEP
htmlcssviewport
user1059511
user1059511

Reputation: 267

Image list based on viewport height with proportional resizing

I would like a single column of images that scale to the viewport height, while retaining their aspect ratio.

I have a working demo: https://codepen.io/garethj/pen/qrjjvp

The problem I have is the links are not wrapping around the images, so the hitzones are too large (and will interfere with other UI elements ). Setting the a tags to display:block wrap the images, but kills the resizing.

Is there another way to approach this? 

<section id="projects">

<a href="#"><img src="http://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" /></a>
<h2>Project one</h2>


<a href="#"><img src="http://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" /></a>
<h2>Project two</h2>

</section>

CSS:

 html,
body,
#projects {
  height: 100%;
  margin: 0;
}

#projects {
  margin: auto 5%;
  text-align: center;

}

h2 {
  margin: 20px 0 100px 0;
  font-weight: normal;
  font-size: 20px;
}

img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100% - 200px);
  margin: 0px auto;
  padding-top: 100px;
}

https://codepen.io/garethj/pen/qrjjvp

Upvotes: 2

Views: 100

Answers (3)

Roy Bogado
Roy Bogado

Reputation: 4452

Try this.
Add a class to tag <a> to your css code a{display:inline-block;}.
Edit the class img{} with max-width:300px; width:100%.
Thw images will be displayed in max-width 300px but they will be resized if they needed it.

img {
  display: block;
  width: auto;
  height: auto;
  width: 100%;
  max-height: calc(100% - 200px);
  margin: 0px auto;
  padding-top: 100px;
  max-width:300px
}
a{display:inline-block;}

Let me know if works.

Upvotes: 0

Stavm
Stavm

Reputation: 8131

changed your display to inline, and your padding-top to margin-top.

img {
  display: inline;
  margin-top: 100px;
}

https://codepen.io/anon/pen/MpEdzV

does it not solve your issue ?

Upvotes: 2

Ashwin
Ashwin

Reputation: 323

Something like this?

html,
body,
#projects {
  height: 100%;
  margin: 0;  
}

#projects {
  margin: 0 auto;
  text-align: center;
  width: 50%;
  
}


h2 {
  margin: 20px 0 100px 0;
  font-weight: normal;
  font-size: 20px;
}

img {
  display: flex;
  width: auto;
  height: 100vh;
  max-width: 100%; 
  margin: 0px auto;
  padding-top: 100px;
 }

@media (max-width: 900px) {
  img {
    max-height: calc(100% - 0px);
    padding-top: 0px;
  }
  
  h2 {margin-bottom:0px;}
}


/* demo stylin' */

body {
  font-size: 24px;
  font-family: arial;
  font-weight: normal;

}
<section id="projects">

<a href="#"><img src="https://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" /></a>
<h2>Project one</h2>


<a href="#"><img src="https://new.eighthday.modxcloud.com/images/20-42.0.6cbcd440.jpg" /></a>
<h2>Project two</h2>

</section>

Upvotes: 0

Related Questions