CSS Image expanding over parent div size

Question

The title says most of it. My html:

<div class="wrap">
 <div class="s-inner">
  <figure>
   <img>
  </figure>
 </div>
</div>

CSS:

.wrap{
 max-width:500px;
 max-height:200px;
 background:red;
 }
.s-inner{
position: relative;
margin: inherit;
padding:inherit;
display: -webkit-flex;
display: flex;
max-height: 100%;
max-width: 100%;
box-sizing:inherit;
margin:auto;
}
/*            Inside             */
.s-inner > figure{
  display: block;
  margin: 0 auto 0 auto;
  box-sizing: border-box;
}
  .s-inner > figure > img{
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
}

If you inspect the .wrap div you will notice that the image is popping out and being larger than the div,how that be fixed for image to scale the .wrap div size.Fiddle

So? That's the default behaviour. If you don't want that you can "hide" by adding `overflow; hidden` to parent or you can make the image have a percentage height. — Aziz, Feb 29 '16 at 15:24
Consider the CSS **`object-fit`** property: http://stackoverflow.com/a/34301817/3597276 — Michael Benjamin, Feb 29 '16 at 15:26
@Michael_B i do not want to use it as it is not supported by IE and Edge — August, Feb 29 '16 at 15:35
IE workarounds for `object-fit`: [**HERE**](https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3) and [**HERE**](https://github.com/anselmh/object-fit) — Michael Benjamin, Feb 29 '16 at 15:39

score 5 · Accepted Answer · answered Feb 29 '16 at 15:35

when the image you have is bigger than the division .. image cannot fit in it. so you have to set width and height for the image also

  .s-inner > figure > img {
     height: 196px;
     box-sizing: border-box;
     max-width: 100%;
     max-height: 100%;
     width: 500px;
       }

or the responsive way

 .s-inner > figure > img {
height: 100%;
box-sizing: border-box;
max-width: 100%;
max-height: 100%;
width: 100%;
 }

score 1 · Answer 2 · answered Feb 29 '16 at 16:05

Your div.wrap element's width and height are set to 500px and 200px respectively. The aspect ratio of this width and height is 5:2. Your image, on the other hand, has the resolution 2048x1376 which translates to 64:43 in aspect ratio. If we scale it down, we get 5:3.35.

When you compare the two aspect ratios, 5:2 and 5:3.35, you see that the image is taller than the div.wrap element.

I can think of three different ways to approach this

First, you can stretch the image to fit in: JSFiddle

.wrap {
  width: 500px;
  height: 200px;
  background: red;
}
.wrap * {
  width: 100%;
  height: 100%;
}

Second, fit the image in keeping the aspect ratio: JSFiddle

.s-inner > figure > img {
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  height: 200px; // add height of the .wrap
}

And three, you hide the overflowing part of the image and reposition the image: JSFiddle

.wrap {
  max-width: 500px;
  max-height: 200px;
  background: red;
  overflow: hidden; // hide overflow
}
.s-inner > figure > img {
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  margin-top: calc(-335.938px + 200px); // reposition the image
}

score 1 · Answer 3 · answered Feb 29 '16 at 16:06

Try add overflow: hidden to your wrap div and width: 100%; to sub divs.

css:

.wrap{
  max-width:500px;
  max-height:200px;
  background:red;
  overflow: hidden;
}
.s-inner{
    position: relative;
    display: -webkit-flex;
    display: flex;
    height: auto;
    width: 100%;
    box-sizing:inherit;
    margin:auto;
  }
/*            Inside             */
    .s-inner > figure{
      display: block;
      margin: 0 auto 0 auto;
      box-sizing: border-box;
    }
      .s-inner > figure > img{
        box-sizing: border-box;
        width: 100%;
        height: auto;
    }

fiddle: https://jsfiddle.net/3uvpt3ta/7/

score 0 · Answer 4 · edited May 23 '17 at 12:25

This demo shows that the .warp element isn't overflowed by the "image", but it is expanded by the "image". The major changes are:

Added defaults styles
.wrap is display: table
.s-inner is display: table-cell
.s-inner removed flex properties
The <img> is removed.
The image src is now assigned to figure background-image
background-size: contain is added to figure as well. This is similar to object: fit. With the value of contain, the image will not be clipped nor will it not get distorted on resizing. In fact it tries to maintain it's original ratio.
figure is 100vw x 100vh, basically if not contained, it will expand from one edge of the screen to the other edge both horizontally and vertically.
Added a title and icon because it looks nice.
Try resizing it, it's responsive but the core elements (the ones inside the <body>) don't entirely rely on percentage lengths. The trick is to have a width and height that's explicitly set to an absolute and/or intrinsic measurements. Then work your way down the layers alternating between relative and absolute.
It's also good to start off with a display as a foundation, it can be a classic block and inline-block, or flex, or my favorite table. If consistent to the type of display you decide to use, the less confusing it'll be.

Fiddle

Snippet

/* Defaults ~~~~~~~~~~~~~~~*/

html {
  box-sizing: border-box;
  font: 500 16px/1.428 'Raleway';
  height: 100vh;
  width: 100vw;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  font-size: 1rem;
  line-height: 1;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Modified OP ~~~~~~~~~~~~~~~~~~~~*/

.wrap {
  display: table;
  max-width: 500px;
  max-height: 200px;
  background: orange;
}
.s-inner {
  display: table-cell;
  width: 100%;
}
.s-inner > figure {
  width: 100vw;
  height: 100vh;
  background-image: url(http://www.trbimg.com/img-4fad2af0/turbine/hc-american-school-for-the-deaf-20120510-006);
  background-repeat: no-repeat;
  background-size: contain;
}
figure:before {
  content: '';
  font-size: 3em;
}
.title {
  font-variant: small-caps;
  color: black;
  margin: 10px 30px 0 35%;
  float: right;
}

<link href='https://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet'/>

<main class="wrap">
  <section class="s-inner">
    <figure>
      <figcaption class="title">
        <h1>
   HC American School for the Deaf
    </h1>
      </figcaption>
    </figure>
  </section>
</main>

CSS Image expanding over parent div size

4 Answers4

Linked