5

I have a image inputted in the css with the following code:

.imgtemp { 
          float:right; 
          top:0px; 
          left:0px; 
          overflow:visible; 
          width:100%;
        }

I have also added the div tag to the page so its displaying, but the image is wider than the div due to the design. How can I make it overflow the divs its in to get it correct.

Thanks.

1
  • do you want the image to expand the div is in? or do you want to crop the image to the size of the div?
    – Nelson
    Sep 20, 2012 at 22:43

3 Answers 3

5

You should place overflow:visible on your div, not on an image.

5

As Nelson said, overflow: hidden on your image won't help you. If you absolutely must have the container be smaller than the image inside it, you can use positioning (relative on the parent div, absolute on the image with a top and left of 0, for example) to ignore its parent's size. You'll want to use something other than % on the image, too, because the % will read off its parents size, which is counter-productive.

Or, did you mean you want the parent div to cut off the extra image?

2
  • The image is wider than the div its in, but the image stops at the sides of the div, and I need it to expand over them. How can I do this? Sep 20, 2012 at 22:56
  • So you will need to remove the width: 100% from your image, firstly. Secondly, if your parent div needs to have a set height and width, you need to do the positioning changes that I mentioned above. If the parent div does not need to have a set height and width, then just don't declare any for that div, and it will expand to fit the image. Sep 20, 2012 at 23:12
0
.contact__section{ //  your container
    width: 100%;
    display: block;
    overflow: hidden; // hide in case your XL image is too high to keep other sections of page neat
}
.contact__flexbox{
    position: relative; // you may not need it
    display: block; // for mobile size, or none; if not want to display on mobile
    width: 1100px; // our container width
    max-width: 100%; // for mobile
    margin: 0 auto; // center it on page
    @include tablet{ // My personal media query, replace with yours for tablet + size
        display: flex;
        align-items: center;
        justify-content:space-evenly;
    }
}
.contact__image-xl{
    position: relative; // important
    display: flex;
    flex:1; // make de 2 columns same size for a split in the middle of screen
    // No need: overflow: visible;
    img{
        // VERY IMPORTANT:
        max-width: 1000%!important;

        position: absolute;
        right: 0; // if your image is on left, otherwise: left:0;
        width: 1200px; // your image at the size you want it to display
    }
}
2
  • It's an easy way with flexbox, can be used with normal box model with floats as well :)
    – Seolead
    Jul 10, 2019 at 9:43
  • This is scss, please adapt for your normal css if needed
    – Seolead
    Jul 10, 2019 at 9:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.