Collin McCabe Collin McCabe - 1 month ago 12
CSS Question

Can't align oversized image to center of div

I have code for an image that is larger than the div it exists in, however I need it to be centered so the middle of the image shows in the div, right now it starts at the left of the image and gets cut off. I'm not sure what code will center it.

EDIT: SOLVED MY SOLUTION IS BELOW THANK YOU ALL FOR YOUR HELP

here is the code:



.about {
display: inline-block;
position:relative;
width:100%;
overflow-x:hidden;
}
.about-img {
content:url("//placehold.it/1000x1000");
}

<div class="about">
<img class="about-img"/>
</div>
<div><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p><p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>




Answer

This might help you is you have a static height for the image. You can set the height to 100vh in the about-image class to set the image height to the full page height.

.about {
    display: inline-block;
    position:relative;
    width:100%;
    overflow-x:hidden;
}
.about-img {
  background :url("//placehold.it/1000x1000") no-repeat center center;
  background-size: cover;
  width: 100%;
  // height: 100px; //static height
  // height: 100vh; // full page height
}
<div class="about">
    <img class="about-img"/>
</div>
<div><p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p><p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>

Comments