Question

28

How to scale an image to cover entire parent div?

rated 0 times [ 34] [ 6] / answers: 1 / hits: 34577 / 9 Years ago, thu, july 2, 2015, 12:00:00

http://jsfiddle.net/Log82brL/15/

This <img> isn't shrink wrapping as I would expect with min-width:100%

I'm trying to shrink the <img> until either height or width matches the container

Click anywhere in the <iframe> to toggle container shapes

Please try to edit the <img> CSS:

MAINTAIN ASPECT RATIO

COVER ENTIRE SURFACE AREA OF CONTAINER DIV

ONLY EDIT THE IMAGE

My question is specifically: scale an <img> to maintain aspect ratio but cover the entire surface of parent <div> even as the parent <div> resizes.

Maybe I could somehow use css flex box-layout or something? Maybe a transform?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aidan

Add To Favorites

Follow

Total Points: 72

Total Questions: 95

Total Answers: 121

Location: Uzbekistan

Member since Sat, Feb 27, 2021

3 Years ago

aidan questions

1 Solana - How to get the balance from my Phantom wallet?

Mon, Oct 11, 21, 00:00, 3 Years ago

1 ChartJS show value in legend (Chart.js V3.5)

Wed, Sep 29, 21, 00:00, 3 Years ago

1 Unable to access modal-dialogue in cypress

Sun, Sep 5, 21, 00:00, 3 Years ago

1 Include an external css file in vuejs

Thu, Jan 16, 20, 00:00, 4 Years ago

1 How to update the state immediately in React functional component?

Tue, Jan 7, 20, 00:00, 4 Years ago

View All

answered 9 Years ago oliverg · Accepted Answer

http://jsfiddle.net/Log82brL/7/

#img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

object-fit: cover allows the replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.