How do I crop an image for screen size rather than resizing it in a web page? [closed]-CodePudding

So I'm developing a web page and the top section of this page has a tiny column in the right side, and to the left of it an image which is occupying the rest of the section and causing my problem.

The issue is that the image extends beyond the device's screen size missing up the layout of the page. Now I don't want to resize it to fit, but rather crop the extra width from the image according the screen size, so that it look the same but you can't horizontally scroll through the page which is what I'm experiencing right now.

I don't really know if that makes sense but if you have any idea on how to solve this please write it here and I will try it.

CodePudding user response：

You change your img tag for a div with background of the img (I suppose you have img tag, you didn't specify). The div then won't exceed the boundaries regardless the img inside it.

<div id="img"></div>
<style>
    #img {
       background: url("your img");
    } 
</style>
// Use this instead of <img src="your img">

CodePudding user response：

To crop the image without resizing it you have to apply overflow: hidden; to the parent element.

To counter the padding of the parent element you have to set a negative margin that equals the padding of the parent.

div {
  padding: 20px;
  overflow: hidden;
}

img {
  margin: -20px;
}

/* for demonstration purpose only */
div {
  border: 1px solid red;
}

img {
  display: block;
}

<div>
  <img src="https://via.placeholder.com/900x200.jpg">
</div>