CODEWITHSUNDEEP
htmlcssflexboxfrontend
Federico
Federico

Reputation: 455

How to vertically stretch an image responsively?

I am trying to implement a sidemenu with a background image but I don't understand how to make it responsive also vertically... I have this image https://ibb.co/Pzyyyh2 whose size is 320x1000px. It's a very tall white image that a certain point becomes black. I'd like to have this black detail to stay always at a certain point of my sidemenu (the transition from white to black should start before the social link part).

As you can see here, on iPhone X emulator, it works as expected: https://ibb.co/C7Nm6b7. While on another device such as Moto G4 this happens: https://ibb.co/S7tQwJV

Upvotes: 0

Views: 50

Answers (1)

Capagris
Capagris

Reputation: 3841

You don't need the white part of the image, if what you're trying to show is the black, then just use the black. If your image is an svg, it will always expand/contract properly, without visible pixelation. The rest of the footer should have a background-color equal to that of your img.

If you want to use skew, then make a first div (the parent/wrapper), then place it right before your footer area. Then inside the wrapper, add the skew-div. Make the parent have overflow:hidden so the excess of the skew-siv doesn't become visible past the borders of the parent.

Like this:

enter image description here

Then, inside your 'magic-div', you'd have the following:

enter image description here

The parent gets width: 100%; and overflow:hidden;. The child skew div inside gets width:100%; too. If you're using background with an svg as suggested earlier, the background-size rule should be 100% auto or cover, depending on the scenario (the widths you're covering + the angle of your skew). Give it a try and let us know how it went.

Upvotes: 1

Related Questions