CODEWITHSUNDEEP
htmlcssimageresize
Jaguar Wong
Jaguar Wong

Reputation: 23

Mixed Content (Image/Text) Resizing in a Div

I'm trying to set up a system where users can change the size of a displayed image/text combination (think "Exhibit #.#" sort of thing) where the image will scale down to whatever size it needs to without pushing the surrounding content outside of the containing . However, everything I've tried has one problem or another, and given that the images I'm working with can be all kinds of sizes, I need a solution that will handle all cases.

This seems like an easy problem but, for whatever reason, I'm completely stumped.

Here's a JSBin with animated sizing to better illustrate my problem: https://jsbin.com/sezimudedi/1/edit?css,output

The html/css I'm working from:

body div {
    text-align: center;
}

@keyframes movingbox {
    0%   { height: 100px; width: 100px; }
    25%  { height: 500px; width: 100px; }
    50%  { height: 500px; width: 500px; }
    75%  { height: 100px; width: 500px; }
    100% { height: 100px; width: 100px; }
}

div.divblock {
    display: inline-block;
    border: 2px dotted red;
    margin: auto;
    padding: 10px;
    text-align: center;
    animation: movingbox 8s linear infinite;
}

div.divblock div {
    width: 100%;
    height: auto;
}

div img {
    max-width: 100%;
    max-height: 100%;
}

div.divblock h6 {
    display: block;
}
<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<div>
			<div class="divblock">
				<h4>Header Text</h4>
				<p>The quick brown fox jumped over the lazy dog.</p>
				<div>
					<img src="http://cdn.sstatic.net/stackoverflow/img/[email protected]?v=ea71a5211a91&a">
				</div>
				<h6>This is a test.</h6>
			</div>
		</div>
	</body>
</html>

Upvotes: 2

Views: 110

Answers (1)

dajnz
dajnz

Reputation: 1188

Look this jsbin (just drag the red box corner to resize). When you set height of image parent block to auto, like this:

div.divblock div {
    width: 100%;
    height: auto;
}

you make this block height depends of it's content height (img element), from other side, you want image width and height to be equal to it's parent block sizes, using this code:

div img {
    max-width: 100%;
    max-height: 100%;
}

All this conditions met in your jsbin sample, but if you'll add an outline for your image container, you will see it's height remains constant (equal to your image height). So the problem here not in image (it resizes fine), but in image block height.

Image block height changing problem caused by the difficulty to calculate what part of parent container's height must be used as image block height after you change the parent container's height with your animation. You have also some content with constant height in your parent container, so on each changing of it's height the height of your image container must be calculated as (100% - height_of_constant_content).

My solution is to use css calc() function, but take in account it's support in browsers. Also you can recalculate your image container height using some js.

Upvotes: 1

Related Questions