CODEWITHSUNDEEP
htmlcss
phuxuth
phuxuth

Reputation: 45

how can css let image bigger than screen?

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.

Upvotes: 3

Views: 3992

Answers (3)

Vitorino fernandes
Vitorino fernandes

Reputation: 15971

  • 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>

Upvotes: 2

Jake Taylor
Jake Taylor

Reputation: 4336

Sheldon is correct about setting the image as a background on your css, but if you want the image to be centered on the screen you'll need more css. Basically something like this:

.img { 
    height:100%;
    background-image:url(path to image);
    background-position:50% 50%;
    background-size:cover;
    padding:0px;
    margin:0px;
    overflow:hidden;
}

You can also adjust your height according to how you want it

Upvotes: 1

Sheldon Scott
Sheldon Scott

Reputation: 741

Set the image as a background with center positioning. Maybe something like:

body { background:url('PATH/TO/IMAGE') no-repeat center top; }

Upvotes: 1

Related Questions