'Make a div 100% + 50px wide, or crop an image but make the remainder full width

I have the following image:

enter image description here

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.

enter image description here

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.

css


Solution 1:[1]

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

<div class="container">
 <div class="image" 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.

enter image description here

Solution 2:[2]

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>

Solution 3:[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 phucbm
Solution 2 Musadarj
Solution 3 Neptotech -vishnu

Related Questions