I have the following image:

On mobile, I'd like the right edge of this image to exceed the right edge of the screen, so the curved portion @ right of the image is cropped, but the remaining image is 100% wide.

Is it possible to make its containing div be 100% 50px wide? I've tried

width: calc(100%   50px)

but this wasn't applied.

Or is there a way to crop the image, but make the remainder full width?

Thanks.

CodePudding user response：

You can try this solution, the HTML should be something like this.

<div >
 <div  style="background-image:URL()"><img src=""></div>
</div>

The container is used to set overflow:hidden. The background-image is used to make sure the image won't be stretched when we change its size by adding background-size:cover|contain.

To make the image exceed 50px to the right, you can use a minus margin, notice that you have to set width:auto to let the margin changes the width.

CodePudding user response：

use overflow: hidden; on image's parent container, so the code is like this

<div style="width: calc(100% - 150px); overflow: hidden;">
  <img src="https://i.stack.imgur.com/61aIt.jpg"/>
</div>

CodePudding user response：

You may also use clip-path function to crop the image and it will also retain the width of the container.

Here is the snippet for image cropping, you can wrap it in container as per your needs.

img {
  max-width: 100%;
  clip-path: polygon(0 0, calc(100% - 50px) 0, calc(100% - 50px) 100%, 0% 100%);
}

<img src="https://i.stack.imgur.com/61aIt.jpg" />

CodePudding user response：

img {
  max-width: 100%;
}

@media only screen and (max-width: 500px) {
  img {
  max-width: 100%;
  --cropSize:50px;
  clip-path: polygon(0 0, calc(100% - var(--cropSize)) 0, calc(100% - var(--cropSize)) 100%, 0% 100%);
}
}

<img src="https://i.stack.imgur.com/61aIt.jpg" />

• Change crop size variable if required,
• Here we use clip-path to crop size
• And we use media screen to check weather device is mobile/desktop, open in full page and try resizing the page width