CODEWITHSUNDEEP
htmlcss
August
August

Reputation: 1819

CSS Image expanding over parent div size

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

Upvotes: 4

Views: 30832

Answers (4)

zer00ne
zer00ne

Reputation: 44086

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>

Upvotes: 0

DebRaj
DebRaj

Reputation: 599

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/

Upvotes: 1

akinuri
akinuri

Reputation: 12037

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
}

Upvotes: 1

Krishna Kamal
Krishna Kamal

Reputation: 124

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%;
 }

Upvotes: 5

Related Questions