Image height will not change when resizing a window

Question

I would like the image to be displayed only if the size of the viewport is less than 768 pixels.

When less than 768 pixels, the image should cover the entire width of the window and should not be distorted (i.e., the height should change proportionally to the width).

However, right now, I cannot change the height when I resize the window.

I tried to change the display to lock and enter width:100%, height:auto.

HTML:

<div class="row col-12" id="mobileimg">
    <img src="images/img.png" alt="">
</div>

CSS

#mobileimg {
    display:none;
}

@media only screen and (max-width: 768px) {

#mobileimg {
    display:flex;
    margin-top:20px;
}
}

Thank!

Answer 1

You need to set the size of the image itself. This makes the image sensitive. Try the following:

#mobileimg {
  display: none;
}

@media screen and (max-width: 768px) {
  #mobileimg {
    display: flex;
    margin-top: 20px;
  }
  img {
    width: 100%;
    height: 100%;
  }
}

<div class="row col-12" id="mobileimg">
  <img src="http://lorempixel.com/400/200/" alt="">
</div>

Run codeHide result

jsFiddle demo