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.