CODEWITHSUNDEEP
cssimageresizecropcentering
Gabriel Luz Carpes
Gabriel Luz Carpes

Reputation: 15

How to crop an image and keep it's center when resizing the window

I have an image tag (containing a .png) that spans the width of my viewport. When I resize it I want it to be cropped with the png's center fixed on the center of the page, however it crops relative to its top-left point. The image is inside a as well

The image is part of a bootstrap carousel and it's supossed to be the promotional banner of a website. I've tried using the image as a background-image and it worked exactly as I wanted, but I'd prefer to use an image tag for this (acessibility and other control preferences). I've also tried the object-position property on CSS and it didn't work (I applied it to the image)

<div class="image-container">
    <img src="img/..." class="banner-image" alt="Banner image">
</div>

CSS

.image-container {
    height: 460px;
    overflow: hidden;
}

.banner-image {
    min-width: 100%;
}

This is a small image showing what I'm experiencing and the desired result: (I can't post it as an image, but I uploaded to imgur)

https://i.sstatic.net/1IXrP.jpg

Upvotes: 1

Views: 1033

Answers (2)

Paulie_D
Paulie_D

Reputation: 115045

Flexbox can do that.

In this case, I've allowed overflow and made the image slightly transparent so you can see the behaviour of the image.

.image-container {
  height: 460px;
  //overflow: hidden;
  display: flex;
  width: 60vw;
  margin: 1em auto;
  border: 1px solid red;
  justify-content: center;
}

.banner-image {
  opacity: .5
}
<div class="image-container">
  <img src="http://www.fillmurray.com/620/460" class="banner-image" alt="Banner image">
</div>

Upvotes: 1

user3119231
user3119231

Reputation:

To have an image fit into a div you can make use of css like following:

HTML

<div class="image-container">
</div>

CSS

.image-container {
    background: url("../banner.jpg") no-repeat center;
    background-size: cover;
    height: 460px;
    width: 100%;
}

Fiddle: https://jsfiddle.net/01x82wz3/

Reference: https://developer.mozilla.org/de/docs/Web/CSS/background-size

Upvotes: 1

Related Questions