CODEWITHSUNDEEP
cssimageoverflow
Kris Hunt
Kris Hunt

Reputation: 2242

How do I hide the overflow of an image if it's too big for the parent container?

How can I hide the overflow of this image without removing it from the flow? If I made it a background image or positioned it absolutely, the text would flow right through it, and I don't want that. Applying overflow:hidden to the parent only expands the height of it to contain the whole image. What I want is:

https://jsfiddle.net/krishunt/e7mzo54c/

    <head>
    <title></title>
    <meta charset="utf-8" />

    <style type="text/css">
        body {
            font-family: helvetica;
            color: #333333;
        }

        section {
            background-color: #E3E2DE;
            padding: 20px 30px 30px 30px;
            max-width: 1200px;
        }

        .pull-right {
            float: right;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <section>
        <img class="pull-right" src="http://thomasprintworks.com/temp/copier.png" />
        <h2>Title of Section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id.</p>
    </section>
</body>

Upvotes: 3

Views: 6520

Answers (1)

Aakash
Aakash

Reputation: 1515

Add overflow:hidden to the <section>, this should work!

Upvotes: 3

Related Questions