html – leave responsive image horizontally, but not scaled, but cropped horizontally

Question:

Good afternoon

How to make an image responsive, so that it is literally clipped to its horizontal, so that it removes the horizontal scrollbar from the page, and doesn't have a "crushed" appearance

Thanks to those who help, below is an example, the image is responsive, but I wanted to remove the "crushing" effect from the image, I want it to be cropped, not resized

<html>

  <head>
  </head>

  <body>
                <img alt="" class="form-image" border="0" src="https://www.jotform.com/uploads/natupote/form_files/SALADA2.png" height="800px" width="100%" />

  </body>

</html>

Answer:

You need to put the image as the background of some div :

.img-responsive {
    background: url('http://i.imgur.com/xRxFRSY.jpg') top center;
    width: 100%;
    height: 250px;
}
<div class="img-responsive">
</div>
Post Views: 0
Scroll to Top
AllEscort