Hot to change height of a responsive image without cutting its content?-CodePudding

I need to change the heights of the image but to keep it responsive, keep the same width, and do not cut the content weirdly.

I try to add height property in my img section in HTML, but it is not working (do not change anything).

My code in HTML:

<section>
    <img src="me.jpg" alt="me" class="img-responsive center-block">
  </section>

CodePudding user response：

this solved my issue

 <section>
      <img src="me.jpg" alt="me" width="600" height="435" class="img-responsive center-block">
    </section>

and CSS code


.img {
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 2px solid rgb(44,44,44);
}

thanks for your help

CodePudding user response：

HTML

<section>
  <img src="me.jpg" alt="me" class="img-responsive center-block">
</section>

CSS You can add the width value you need, the vw is the percentage of the device's width. This way you can make it responsive in through the X axis, meaning it'll only change horizontally. And the height should be automatic so it is adjusted according to the width and the original aspect.

.img-responsive center-block {
   width: 20vw; 
   height: auto; 
}