CSS full height of dynamically inserted img element

Question

I am using a plugin that allows me to create sliders. The images I upload are dynamically inserted as <img> tags into the front page layout. While I know how to render an image in its full height using CSS, I am unable to get this to work with the html image element.

This code works great if the image is served by CSS and the result is perfect.

HTML

.container{
   width: 750px;
   height: 600px;
   background: rgba(222,211,210,1);
   border: solid 4px #8c8c8c;
}

.slider{
   background-image: url('https://i.imgur.com/Ye4Uugc.jpg');
   width: 100%;
   height: 100%;
   background-size: auto 100%;
   background-position: center;
   background-repeat: no-repeat;
}

<div class="container">
   <div class="slider">
   </div>
</div>

But the problem I have is when the image is inside HTML like this. I cannot meddle with the HTML code as the plugin inserts the image tags dynamically and I have more than 500 images inserted by the plugin.

HTML

.container{
   width: 750px;
   height: 600px;
   background: rgba(222,211,210,1);
   border: solid 4px #8c8c8c;
}

.slider{
   width: 100%;
   height: 100%;
   background-size: auto 100%;
   background-position: center;
   background-repeat: no-repeat;
}

<div class="container">
   <div class="slider">
      <img src="https://i.imgur.com/Ye4Uugc.jpg">
   </div>
</div>

The result for the above code is this. Obviously overflow: hidden; clips the lower part exceeding the container height, which is not the solution I want as I need the image to fit inside the container retaining its original ratio.

Any help is appreciated.

The first one was a background and the second one is an img so look at ([how-do-i-auto-resize-an-image-to-fit-a-div-container](https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container)).. — Shadow Fiend, Nov 07 '17 at 00:45

score 0 · Answer 1 · edited Nov 07 '17 at 04:58

add rules to images also to prevent overflow:

.container{
  width: 750px;
  height: 600px;
  background: rgba(222,211,210,1);
  border: solid 4px #8c8c8c;
}

.slider{
  width: 100%;
  height: 100%;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.slider img{
  max-width:100%;
  max-height:100%;
  height:auto;
}

<div class="container">
   <div class="slider">
      <img src="https://i.imgur.com/Ye4Uugc.jpg">
   </div>
</div>

score 0 · Answer 2 · edited Nov 07 '17 at 04:59

I'm remake code from @Ali Sheikhpour. adding width: 100%; to .slider img

.container{
  width: 750px;
  height: 600px;
  background: rgba(222,211,210,1);
  border: solid 4px #8c8c8c;
}

.slider{
  width: 100%;
  height: 100%;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.slider img{
  max-width:100%;
  max-height:100%;
  height:auto;
  width: 100%;  
}

<div class="container">
   <div class="slider">
      <img src="https://i.imgur.com/Ye4Uugc.jpg">
   </div>
</div>

CSS full height of dynamically inserted img element

2 Answers2