CODEWITHSUNDEEP
htmlcssimagecenter
fechnert
fechnert

Reputation: 1242

How to center image which is bigger than screen?

I've following code:

HTML

<div class="banner">
    <img src="banner.png">
</div>

CSS

.banner > img {
    margin: auto;
}

The Image have a width of 3000px and a height of 200px I want the image horizontal centered and no horizontal scroll bar. (Browser resizing should no problem then)

I've tried to give the .banner div the banner image as background-image but then the div won't find it's size automatically ...

How is this possible?

Upvotes: 1

Views: 2471

Answers (3)

Ali Masaoodi
Ali Masaoodi

Reputation: 71

How to Center an Image in HTML & CSS and prevent horizontal scroll bar?

1. Prevent horizontal scroll bar:

Try this will work perfectly, add overflow-xproperty to the class and set it to hidden, That Will Disable The Horizontal Scroll Bar in CSS. See How to prevent horizontal scrolling? - Stack Overflow.

2. How to Center an Image in CSS?

You can center the image by using these CSS properties:

  1. display: flex;.
  2. justify-content: center;.

CSS code:

.banner {
    overflow-x:hidden;
    display: flex;
    justify-content: center;
}

HTML code:

<div class="banner">
    <img src="">
</div>

Upvotes: 3

Devin
Devin

Reputation: 7720

Your best option is using the images as background, but if you want/need to use the image, do it like this

.banner{overflow:hidden; height:200px; width:100%; text-align:center;}
.banner img{width:100%; height:100%; margin:0 auto;}

Upvotes: 3

nicogaldo
nicogaldo

Reputation: 585

<div class="banner">
</div>

css:

.banner {
    background: url(http://ximg.es/3000x200/000/fff.png) no-repeat 50% 50%;
    height:200px;
}

like this: jsfiddle

Upvotes: 1

Related Questions