how can css let image bigger than screen?

Issue

Here is the HTML:

<div class="image-container">
  <img src="/path/to/a/image/maybe/bigger/than/screen"/>
</div>

And there is the LESS:

.image-container{
  width: 100%;
  overflow-x: hidden;
  padding: 0;
  img{
    width: 100%;
    margin: 0 auto;
  }
}

The image is mostly width: 1600px, but height is unknwon.

The screen-width is mostly smaller than 1600px.

I want the image can show it's center part even in small screens. The image's height is unknown. And the container's height should equals image's, as a block let the afters not overlap on.

Current LESS cannot work as expect.

Solution

• You will need to add height for the parent
• Position the image by adding position:absolute

.image-container {
  width: 100%;
  overflow-x: hidden;
  padding: 0;
  border: 1px solid red;
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="image-container">
  <img src="https://placekitten.com/g/1600/200" />
</div>

Answered By - Vitorino fernandes