CODEWITHSUNDEEP
htmlcsslayout
xApple
xApple

Reputation: 6466

Autoscale an img size (preserving aspect ratio) to the parent's div height

I cannot figure out how to prevent the image (seen below) from overflowing the div within which it is contained.

I have tired the obvious solutions such as setting height: 100% as well as various combinations of display: block or display: flex

How to I automatically scale the image (preserving aspect ratio) so that it fills the height of its parent div (but not more)?

Here is the HTML file along with the CSS file. Pressing "Run Code Snippet" shows the problem perfectly.

body {
    margin:  0.0em;
    padding: 0.0em;
}

.banner {
    width: 100%;
    background-color: yellow;
}

.text-one {
    margin:      0.0em;
    padding:     0.2em 0.2em 0.0em;
    font-weight: bold;
}

.text-two {
    margin:     0.0em;
    padding:    0.0em 0.4em 0.5em;
    font-style: italic;
}

.picture {
    float:  right;
    height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS Problem</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="main">
    <div class="banner">
        <a href="https://www.other-example.com">
            <img class="picture"
                 src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg">
        </a>
        <div class="both-text">
            <a href="https://www.example.com/">
                <h1 class="text-one">
                    www.Example.com/
                </h1>
            </a>
            <h3 class="text-two">
                The Example Application
            </h3>
        </div>
    </div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
    </p>
</div>

</body>
</html>

Upvotes: 0

Views: 62

Answers (2)

onyx
onyx

Reputation: 1618

You need to specify the display property of your anchor (<a></a>) tag that holds the image to inline-block. Another way is to fix the banner height by specifying a height, e.g height: 100px.

Edit: To dynamically scale the picture and fix it in the container, use: 

body {
    margin:  0.0em;
    padding: 0.0em;
}

.banner {
    width: 100%;
    background-color: yellow;
    position: relative;
}

.text-one {
    margin:      0.0em;
    padding:     0.2em 0.2em 0.0em;
    font-weight: bold;
}

.text-two {
    margin:     0.0em;
    padding:    0.0em 0.4em 0.5em;
    font-style: italic;
}

.picture {
    height: 100%;
}

.img-container {
    height: 100%;
    right: 0;
    position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS Problem</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="main">
    <div class="banner">
        <a  class="img-container" href="https://www.other-example.com">
            <img class="picture"
                 src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg">
        </a>
        <div class="both-text">
            <a href="https://www.example.com/">
                <h1 class="text-one">
                    www.Example.com/
                </h1>
            </a>
            <h3 class="text-two">
                The Example Application
            </h3>
        </div>
    </div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
    </p>
</div>

</body>
</html>

Upvotes: 3

Rnayak
Rnayak

Reputation: 96

change your css of picture class as

.banner a .picture
{ max-width:100%;
  max-height:100%;
}

this max-height,max-width attribute will be applied to your class picture and will work relative to its parent element.

Upvotes: -1

Related Questions