How do i show the entire image in the container?

Question

The image itself is 6024x4024. i can hide the overflow but it seems i cant get it to show the full image in the container. what im seeing is that its zoomed in on the picture.

.section1{
    background-image: url(section1.jpg);
    height: 600px;
    width: 100%;
    overflow: hidden;
    object-fit: cover;
}

<section>
    <div class="section1">

    </div>
</section>

Change `object-fit` to none. This will not resize the image. If you want to fill the container (div), then use `fill` in `object-fit`. — Utsav Patel, Apr 21 '20 at 05:06
Does this answer your question? [Background images: how to fill whole div if image is small and vice versa](https://stackoverflow.com/questions/4779577/background-images-how-to-fill-whole-div-if-image-is-small-and-vice-versa) — Heretic Monkey, Apr 21 '20 at 16:22

score 0 · Answer 1 · answered Apr 21 '20 at 05:10

0

.section1{
    background-image: url(section1.jpg);
    height: 600px;
    width: 100%;
    overflow: hidden;
    object-fit: contain;
}

Change the object-fit to contain it will show entire image.

answered Apr 21 '20 at 05:10

Pramith Chathuranga

514
3
21

score 0 · Accepted Answer · edited Apr 21 '20 at 16:17

0

Try this. background-size:contain;

<html>

<head>
    <title>Javascript</title>
    <style>
        .section1{
    background-image: url('../Downloads/1.jpg');
    height: 600px;
    width: 100%;
background-size:contain;
}
    </style>
</head>

<body>
    <section>
        <div class="section1">

        </div>
    </section>

</body>

</html>

edited Apr 21 '20 at 16:17

halfer

19,824
17
99
186

answered Apr 21 '20 at 06:02

Adesh Kumar

952
2
16
33

How do i show the entire image in the container?

2 Answers2