'In some viewports, how to get slider image to same height as parent div?

In the snippet below, I have a slider. Half the slider is static text, and the other half is images. When the viewport hits 768px, the images go to a different height and doesn't take on the full height of the div. I've tried object-fit, but it's not going to the height of the div. I'm trying to get the effect of background-size: cover;, but I'm using an image tag instead of a background image.

How do I get the image to go the full height of the div, without distorting the image?

//slides
let slideIndex = 0;
document.querySelector('.slideshow') ? showSlides() : null;

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("slideshow__slide");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  slides[slideIndex-1].style.display = "block";    
  setTimeout(showSlides, 4000); // Change image every 2 seconds
}
h1 {
  font-size: 2.5rem
}

@media(min-width: 768px) {
  h1 {
    font-size: 3.75rem
  }
}

h2 {
  font-size: 2.25rem
}

@media(min-width: 768px) {
  h2 {
    font-size: 3rem
  }
}

h3 {
  font-size: 1.5rem
}

@media(min-width: 768px) {
  h3 {
    font-size: 2.25rem
  }
}

h4 {
  font-size: 1.25rem
}

@media(min-width: 768px) {
  h4 {
    font-size: 1.75rem
  }
}

h5 {
  font-size: 1rem
}

@media(min-width: 768px) {
  h5 {
    font-size: 1.25rem
  }
}

h6 {
  font-size: 1rem
}

.slider-box {
  display: flex;
  flex-direction: column
}

.slider-box__left,
.slider-box__right {
  display: flex;
  flex-direction: column;
  flex: 1
}

.slider-box__left {
  order: 2
}

@media(min-width: 768px) {
  .slider-box__left {
    order: 1
  }
}

.slider-box__right {
  order: 1
}

@media(min-width: 768px) {
  .slider-box__right {
    order: 2
  }
}

.slider-box__right .slideshow {
  max-width: 1000px;
  position: relative;
  margin: auto
}

.slider-box__right .slideshow__slide {
  display: none
}

.slider-box__right .slideshow__slide img {
  width: 100%;
  height: auto!important;
  object-fit: contain
}

.slider-box__right .slideshow__slide.fade {
  animation-name: fade;
  animation-duration: 1s
}

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

.slider-box__left--content {
  display: flex;
  background: #9dc344;
  padding: .5rem
}

.slider-box__left--inner {
  border: 1px solid #fff;
  width: 100%;
  padding: .5rem
}

.slider-box__left--inner .logo-icon {
  display: flex;
  justify-content: center
}

.slider-box__left--inner .logo-icon img {
  max-width: 300px
}

.slider-box__left hr {
  width: 2rem;
  background: #fff
}

.slider-box__left--title {
  text-align: center
}

.slider-box__left--title h3 {
  text-transform: uppercase;
  font-weight: 300
}

@media(min-width: 768px) {
  .slider-box {
    display: flex;
    flex-direction: row
  }
}

@media(min-width: 1024px) {
  .slider-box {
    width: 1200px;
    max-width: 1200px;
    margin: 0 auto
  }
}
  <div class="slider-box">
    <div class="slider-box__left">
      <div class="slider-box__left--content">
        <div class="slider-box__left--inner">
          <div class="logo-icon">
            <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Logo-color-300x100.png" alt="">
          </div>
          <div class="slider-box__left--title">
            <h3>Pharmaceutical Compliance you can trust</h3>
            <hr>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam rem, iusto voluptatem necessitatibus
              saepe a.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="slider-box__right">
      <div class="slideshow">
        <div class="slideshow__slide fade">
          <img src="https://jordan-pharma-dev.web.app/img/pharmacist-business-meeting.jpg" alt="">
        </div>
        <div class="slideshow__slide fade">
          <img src="https://jordan-pharma-dev.web.app/img/pharmacist-conference.jpg" alt="">
        </div>
        <div class="slideshow__slide fade">
          <img src="https://jordan-pharma-dev.web.app/img/pharmacists-working.jpg" alt="">
        </div>
        <div class="slideshow__slide fade">
          <img src="https://jordan-pharma-dev.web.app/img/fda-stamp.jpg" alt="">
        </div>
        <div class="slideshow__slide fade">
          <img src="https://jordan-pharma-dev.web.app/img/single-pharmacist-working.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
css


Solution 1:[1]

Using height: auto!important; on img elements means set height of the parent container to image size no matter what. But we want the opposite. So, use height: 100%.

In order to set parent containers' heights we can use window.onresize event. In following code see the /* ... */ comments in CSS for changes:

//slides
let slideIndex = 0;
document.querySelector('.slideshow') ? showSlides() : null;

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("slideshow__slide");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  slides[slideIndex-1].style.display = "block";    
  setTimeout(showSlides, 4000); // Change image every 2 seconds
}

window.onresize = function resizeHandler(){
  const left = document.querySelector('.slider-box__left--content');
  const right = document.querySelector('.slider-box__right');
  right.style.height = `${left.clientHeight}px`;
  right.style.width = `${left.clientWidth}px`;
}
h1 {
  font-size: 2.5rem
}

@media(min-width: 768px) {
  h1 {
    font-size: 3.75rem
  }
}

h2 {
  font-size: 2.25rem
}

@media(min-width: 768px) {
  h2 {
    font-size: 3rem
  }
}

h3 {
  font-size: 1.5rem
}

@media(min-width: 768px) {
  h3 {
    font-size: 2.25rem
  }
}

h4 {
  font-size: 1.25rem
}

@media(min-width: 768px) {
  h4 {
    font-size: 1.75rem
  }
}

h5 {
  font-size: 1rem
}

@media(min-width: 768px) {
  h5 {
    font-size: 1.25rem
  }
}

h6 {
  font-size: 1rem
}

.slider-box {
  display: flex;
  flex-direction: column
}

.slider-box__left,
.slider-box__right {
  display: flex;
  flex-direction: column;
  flex: 1
}

.slider-box__left {
  order: 2
}

@media(min-width: 768px) {
  .slider-box__left {
    order: 1
  }
}

.slider-box__right {
  order: 1
}

@media(min-width: 768px) {
  .slider-box__right {
    order: 2
  }
}

.slider-box__right .slideshow {
  max-width: 1000px;
  position: relative;
  margin: auto;
  
  height: 100%;
  width: 100%;
}

.slider-box__right .slideshow__slide {
  display: none;
  
  height: 100%;
  width: 100%;
}

.slider-box__right .slideshow__slide img {
  width: 100%;
  /*height: auto!important;*/
  /*object-fit: contain;*/
  object-fit: cover;
  
  height: 100%;
}

.slider-box__right .slideshow__slide.fade {
  animation-name: fade;
  animation-duration: 1s
}

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

.slider-box__left--content {
  display: flex;
  background: #9dc344;
  padding: .5rem
}

.slider-box__left--inner {
  border: 1px solid #fff;
  width: 100%;
  padding: .5rem
}

.slider-box__left--inner .logo-icon {
  display: flex;
  justify-content: center
}

.slider-box__left--inner .logo-icon img {
  max-width: 300px
}

.slider-box__left hr {
  width: 2rem;
  background: #fff
}

.slider-box__left--title {
  text-align: center
}

.slider-box__left--title h3 {
  text-transform: uppercase;
  font-weight: 300
}

@media(min-width: 768px) {
  .slider-box {
    display: flex;
    flex-direction: row
  }
}

@media(min-width: 1024px) {
  .slider-box {
    width: 1200px;
    max-width: 1200px;
    margin: 0 auto
  }
}
<div class="slider-box">
    <div class="slider-box__left">
      <div class="slider-box__left--content">
        <div class="slider-box__left--inner">
          <div class="logo-icon">
            <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Logo-color-300x100.png" alt="">
          </div>
          <div class="slider-box__left--title">
            <h3>Pharmaceutical Compliance you can trust</h3>
            <hr>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam rem, iusto voluptatem necessitatibus
              saepe a.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="slider-box__right">
      <div class="slideshow">
        <div class="slideshow__slide fade">
          <img src="https://jordan-pharma-dev.web.app/img/pharmacist-business-meeting.jpg" alt="">
        </div>
        <div class="slideshow__slide fade">
          <img src="https://jordan-pharma-dev.web.app/img/pharmacist-conference.jpg" alt="">
        </div>
        <div class="slideshow__slide fade">
          <img src="https://jordan-pharma-dev.web.app/img/pharmacists-working.jpg" alt="">
        </div>
        <div class="slideshow__slide fade">
          <img src="https://jordan-pharma-dev.web.app/img/fda-stamp.jpg" alt="">
        </div>
        <div class="slideshow__slide fade">
          <img src="https://jordan-pharma-dev.web.app/img/single-pharmacist-working.jpg" alt="">
        </div>
      </div>
    </div>
  </div>

Play with object-fit values to achieve desired image shapes.

Solution 2:[2]

Here you go...

It was a bit tricky to get the desired output. You need to add/remove/change a few lines of your CSS (see comments below), but the main thing is that you need to set the height of the .slider-box if you want object-fit: cover; to work. I also simplified your HTML structure a little bit.

See the snippet below.

// Slides
let slideIndex = 0;
document.querySelector('.slideshow') ? showSlides() : null;

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("slideshow__slide");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  setTimeout(showSlides, 4000); // Change image every 2 seconds
}
h1 {
  font-size: 2.5rem;
}

@media(min-width: 768px) {
  h1 {
    font-size: 3.75rem;
  }
}

h2 {
  font-size: 2.25rem;
}

@media(min-width: 768px) {
  h2 {
    font-size: 3rem;
  }
}

h3 {
  font-size: 1.5rem;
}

@media(min-width: 768px) {
  h3 {
    font-size: 2.25rem;
  }
}

h4 {
  font-size: 1.25rem;
}

@media(min-width: 768px) {
  h4 {
    font-size: 1.75rem;
  }
}

h5 {
  font-size: 1rem;
}

@media(min-width: 768px) {
  h5 {
    font-size: 1.25rem;
  }
}

h6 {
  font-size: 1rem;
}

.slider-box {
  display: flex;
  flex-direction: column;
  max-height: 380px; /* Add this */
}

.slider-box__left,
.slider-box__right {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.slider-box__left {
  order: 2;
}

@media(min-width: 768px) {
  .slider-box__left {
    order: 1;
  }
}

.slider-box__right {
  order: 1;
}

@media(min-width: 768px) {
  .slider-box__right {
    order: 2;
  }
}

.slider-box__right .slideshow {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Remove this */
/*
.slider-box__right .slideshow__slide {
  display: none
}

.slider-box__right .slideshow__slide img {
  width: 100%;
  height: auto!important;
  object-fit: contain
}
*/

.slider-box__right .slideshow__slide.fade {
  animation-name: fade;
  animation-duration: 1s;
}

@keyframes fade {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

.slider-box__left--content {
  display: flex;
  background: #9dc344;
  padding: .5rem;
  height: 100%; /* Add this */
}

.slider-box__left--inner {
  border: 1px solid #fff;
  width: 100%;
  padding: .5rem;
}

.slider-box__left--inner .logo-icon {
  display: flex;
  justify-content: center;
}

.slider-box__left--inner .logo-icon img {
  max-width: 300px;
}

.slider-box__left hr {
  width: 2rem;
  background: #fff;
}

.slider-box__left--title {
  text-align: center;
}

.slider-box__left--title h3 {
  text-transform: uppercase;
  font-weight: 300;
}

@media(min-width: 768px) {
  .slider-box {
    display: flex;
    flex-direction: row;
    height: 100px;
  }
}

@media(min-width: 1024px) {
  .slider-box {
    width: 1200px;
    max-width: 1200px;
    height: 400px; /* Add this */
    margin: 0 auto;
  }
  
  /* Add this */
  .slideshow {
    width: 100%;
    height: 100%;
  }
  
  /* Add this */
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Add this */
  .slider-box__right .slideshow__slide {
    display: none;
  }
  
  /* Add this */
  .slider-box__right .slideshow__slide img {
    width: 100%;
    height: auto !important;
    object-fit: cover;
  }
}

/* Add this */
@media (max-width: 768px) {
  .slider-box__right .slideshow__slide {
    display: none;
  }
  
  .slider-box__right .slideshow__slide {
    width: 100%;
    height: auto !important;
    object-fit: cover;
  }
}
<div class="slider-box">
  <div class="slider-box__left">
    <div class="slider-box__left--content">
      <div class="slider-box__left--inner">
        <div class="logo-icon">
          <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Logo-color-300x100.png" alt="">
        </div>
        <div class="slider-box__left--title">
          <h3>Pharmaceutical Compliance you can trust</h3>
          <hr>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam rem, iusto voluptatem necessitatibus saepe a.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="slider-box__right">
    <div class="slideshow">
      <img class="slideshow__slide fade" src="https://jordan-pharma-dev.web.app/img/pharmacist-business-meeting.jpg" alt="">
      <img class="slideshow__slide fade" src="https://jordan-pharma-dev.web.app/img/pharmacist-conference.jpg" alt="">
      <img class="slideshow__slide fade" src="https://jordan-pharma-dev.web.app/img/pharmacists-working.jpg" alt="">
      <img class="slideshow__slide fade" src="https://jordan-pharma-dev.web.app/img/fda-stamp.jpg" alt="">
      <img class="slideshow__slide fade" src="https://jordan-pharma-dev.web.app/img/single-pharmacist-working.jpg" alt="">
    </div>
  </div>
</div>

Solution 3:[3]

Here is my answer:

let slideIndex = 0;
document.querySelector('.slideshow') ? showSlides() : null;

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("slideshow__slide");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  setTimeout(showSlides, 4000); // Change image every 2 seconds
}
h1 {
  font-size: 2.5rem;
}

@media(min-width: 768px) {
  h1 {
    font-size: 3.75rem;
  }
}

h2 {
  font-size: 2.25rem;
}

@media(min-width: 768px) {
  h2 {
    font-size: 3rem;
  }
}

h3 {
  font-size: 1.5rem;
}

@media(min-width: 768px) {
  h3 {
    font-size: 2.25rem;
  }
}

h4 {
  font-size: 1.25rem;
}

@media(min-width: 768px) {
  h4 {
    font-size: 1.75rem;
  }
}

h5 {
  font-size: 1rem;
}

@media(min-width: 768px) {
  h5 {
    font-size: 1.25rem;
  }
}

h6 {
  font-size: 1rem;
}

.slider-box {
  display: flex;
  flex-direction: column;
  max-height: 380px; /* Add this */
}

.slider-box__left,
.slider-box__right {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.slider-box__left {
  order: 2;
}

@media(min-width: 768px) {
  .slider-box__left {
    order: 1;
  }
}

.slider-box__right {
  order: 1;
}

@media(min-width: 768px) {
  .slider-box__right {
    order: 2;
  }
}

.slider-box__right .slideshow {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Remove this */
/*
.slider-box__right .slideshow__slide {
  display: none
}

.slider-box__right .slideshow__slide img {
  width: 100%;
  height: auto!important;
  object-fit: contain
}
*/

.slider-box__right .slideshow__slide.fade {
  animation-name: fade;
  animation-duration: 1s;
}

@keyframes fade {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}

.slider-box__left--content {
  display: flex;
  background: #9dc344;
  padding: .5rem;
  height: 100%; /* Add this */
}

.slider-box__left--inner {
  border: 1px solid #fff;
  width: 100%;
  padding: .5rem;
}

.slider-box__left--inner .logo-icon {
  display: flex;
  justify-content: center;
}

.slider-box__left--inner .logo-icon img {
  max-width: 300px;
}

.slider-box__left hr {
  width: 2rem;
  background: #fff;
}

.slider-box__left--title {
  text-align: center;
}

.slider-box__left--title h3 {
  text-transform: uppercase;
  font-weight: 300;
}

@media(min-width: 768px) {
  .slider-box {
    display: flex;
    flex-direction: row;
    height: 100px;
  }
}

@media(min-width: 1024px) {
  .slider-box {
    width: 1200px;
    max-width: 1200px;
    height: 400px; /* Add this */
    margin: 0 auto;
  }
  
  .slideshow {
    width: 100%;
    height: 100%;
  }
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .slider-box__right .slideshow__slide {
    display: none;
  }
  
  .slider-box__right .slideshow__slide img {
    width: 100%;
    height: auto !important;
    object-fit: cover;
  }
}

@media (max-width: 768px) {
  .slider-box__right .slideshow__slide {
    display: none;
  }
  
  .slider-box__right .slideshow__slide {
    width: 100%;
    height: auto !important;
    object-fit: cover;
  }
}
<div class="slider-box">
  <div class="slider-box__left">
    <div class="slider-box__left--content">
      <div class="slider-box__left--inner">
        <div class="logo-icon">
          <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Logo-color-300x100.png" alt="">
        </div>
        <div class="slider-box__left--title">
          <h3>Pharmaceutical Compliance you can trust</h3>
          <hr>
          <p>What text you want</p>
        </div>
      </div>
    </div>
  </div>
  <div class="slider-box__right">
    <div class="slideshow">
      <img class="slideshow__slide fade" src="https://jordan-pharma-dev.web.app/img/pharmacist-business-meeting.jpg" alt="">
      <img class="slideshow__slide fade" src="https://jordan-pharma-dev.web.app/img/pharmacist-conference.jpg" alt="">
      <img class="slideshow__slide fade" src="https://jordan-pharma-dev.web.app/img/pharmacists-working.jpg" alt="">
      <img class="slideshow__slide fade" src="https://jordan-pharma-dev.web.app/img/fda-stamp.jpg" alt="">
      <img class="slideshow__slide fade" src="https://jordan-pharma-dev.web.app/img/single-pharmacist-working.jpg" alt="">
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 the Hutt
Solution 2 Cervus camelopardalis
Solution 3 laugh

Related Questions