Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to scale image height with vh div

I'm trying to get this image to scale to the browser by height so it never causes scrolling ( it will be a light box with different image ratios) However it doesn't want to resize the image to fill the parent div and I'm not sure why. It also scales by sliding to the left rather than centering. enter image description here

https://jsfiddle.net/hrfLwyjd/

<style> 
.modal-content {
    width:80vw;
    height:80vh;
    background:yellow;
    display:flex;
    justify-content:center;
}   
.mySlides img {
    width:100%;
    height:auto;
}
</style>


 <div class="modal-content">

    <div class="mySlides">
     <img src="images/5_2.jpg">
    </div>

 </div>
like image 871
duckyduck Avatar asked Jul 19 '17 02:07

duckyduck


People also ask

How do you scale image height in CSS?

Resize the imageUnder “size,” choose the “fluid” option so you can resize your images and scale them proportionally while doing so. Fixed sizing keeps the width of the element the same across all viewport sizes, while fluid sizing adjusts the width — and sometimes the height — of elements depending on the screen size.

How do you scale the size of an image in HTML?

One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.

How do I auto-resize an image to fit a DIV container?

To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container. object-fit property: This property is used to specify how an image or video resize and fit the container.

How do you make a picture fit a viewport?

Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.


2 Answers

This should fix it:

.modal-content {
  width: 80vw;
  height: 80vh;
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mySlides img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
}
<div class="modal-content">
  <div class="mySlides">
    <img src="http://i.imgur.com/cN0XcVQ.jpg">
  </div>
</div>

Update:
As per comment, it looks like you also want to enlarge the image when it's smaller than the lightbox. For that, the simplest solution is:

.modal-content {
  width: 80vw;
  height: 80vh;
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mySlides {
  background: transparent 50% 50% no-repeat /contain;
  height: 100%;
  width: 100%;
}
<div class="modal-content">
  <div class="mySlides" style="background-image:url('http://i.imgur.com/cN0XcVQ.jpg')"></div>
</div>
like image 119
tao Avatar answered Oct 19 '22 18:10

tao


Use width:100vmin and height:vmin like this:

.modal-content {
  background:yellow;
  position: relative;
}   
.mySlides img {
  position: relative;
  max-width: 100%;
  width:80vmin;
  height:80vmin;
  margin-left: auto;
  margin-right: auto:
}

Cheers!

like image 1
Mario Minondo Avatar answered Oct 19 '22 19:10

Mario Minondo