CODEWITHSUNDEEP
ioscss
Neil Sainsbury
Neil Sainsbury

Reputation: 1460

CSS Full Width Images inside Fixed Containers

Is there any way to ensure that an image is always displayed with full-screen with regardless of what container size constraints are placed on it? In my case I'm receiving from the server a HTML file with images in various different containers of different sizes (usually specified in percentages) and for each image I would like to use CSS to "break out" of the container and always occupy full-screen width.

How would I go about doing this?

Upvotes: 0

Views: 559

Answers (1)

Stuart Kershaw
Stuart Kershaw

Reputation: 17671

To 'break them out,' you will need to separate them from the stacking context by applying img { position: absolute; } in your CSS. You could then bring them to full window width by applying img { width: 100%; } to fill... but you're likely to encounter problems with your layout as a result. You should probably focus on making your wrapping containers full-width within the stacking context of the document, in order to preserve the integrity of your layout (which will be changing here with any route that you end up choosing).

Upvotes: 2

Related Questions