CODEWITHSUNDEEP
css
Pikk
Pikk

Reputation: 2743

How to make an image be full width, and dinamically resize for smaller browsers?

in this page I am trying to make the rectangular image on the top to be full width. I tried to give it several different properties, but the nearest effect to what I want is given by:

.dla-ciebie__services .dlaciebie-header-image {
    background-image: url(images/dla-ciebie/dlaciebie-1600.jpg);
    background-size: contain;
    background-position-y: top;
    background-repeat: no-repeat;
    width: 100vw;
    min-height: 100vh;
}

Here is the HTML that contains this element and the next block:

<div class="dla-ciebie">
    <section class="dla-ciebie__services">
        <div class="dlaciebie-header-image"></div>
        <em class="services-intro">Chcę powiedzieć Ci coś bardzo ważnego...<br>nie urodziłaś się po to, by żyć nieświadomie, w bólu i z dużym bagażem zmartwień. Jesteś tu dlatego, że masz w sobie <strong>ogromną siłę, która czeka, aż pozwolisz jej udowodnić swoją moc!</strong>
        </em>
        <div class="services-background">

And here is the full SCSS:

.dla-ciebie__services {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: 40px;
  .dlaciebie-header-image {
    background-image: url(images/dla-ciebie/dlaciebie-1600.jpg);
    background-size: contain;
    background-position-y: top;
    background-repeat: no-repeat;
    width: 100vw;
    /* height: 289px; */
    min-height: 100vh;
  }
  .services-intro {
    font: 40px/60px "Libre Baskerville";
    color: $bluedark;
    width: 60%;
    text-align: center;
    br {
      margin: 0;
    }
    strong {
      font-weight: bold;
    }

    @media (max-width: 900px) {
      width: 88%;
      font-size: 28px;
      line-height: 54px;
    }
    @media (max-width: 500px) {
      font-size: 18px;
      line-height: 32px;
    }
  }
  .services-background {
    background-image: url("images/blue-painting-1200.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 80px;
    width: 100%;
  }

}

Here I cannot give a static height in px, because if I give it a static height, on smaller browsers, the image will change it's proportions.

At the same time what i did is not good too, because it adds some kind of white space below the image. If you shorten the width of the browser window you will see how much the white space below the image increases.

I'd like to ask you for help to solve this issue (if possible avoiding JS solutions). I tried different tutorials, but it seems that how that site is constructed, other tutorial don't seem to be applicable, thus I see the need of a specific solution to this page.

Thanks in advance.

Upvotes: 0

Views: 1461

Answers (1)

David Boroš
David Boroš

Reputation: 665

Don't use <div> as a image by adding background-image to it. Instead, use <img> element, that is why it's made into HTML.

To make it responsive, use width: 100% without height. If you set it like that, Image will auto resize with browser.

This should work perfectly:

.dla-ciebie__services {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: 40px;
}

.dlaciebie-header-image {
  max-width: 100%;
}

.services-intro {
  font: 40px/60px "Libre Baskerville";
  color: $bluedark;
  width: 60%;
  text-align: center;
}

@media (max-width: 900px) {
  .services-intro {
    width: 88%;
    font-size: 28px;
    line-height: 54px;
  }
}

@media (max-width: 500px) {
  .services-intro {
    font-size: 18px;
    line-height: 32px;
  }
}
<div class="dla-ciebie">
  <section class="dla-ciebie__services">
    <img src="https://unsplash.it/1600/500" class="dlaciebie-header-image">
    <p class="services-intro">Chcę powiedzieć Ci coś bardzo ważnego...<br>nie urodziłaś się po to, by żyć nieświadomie, w bólu i z dużym bagażem zmartwień. Jesteś tu dlatego, że masz w sobie <strong>ogromną siłę, która czeka, aż pozwolisz jej udowodnić swoją moc!</strong>
    </p>
  </section>

  <!-- Other code -->
</div>

Upvotes: 2

Related Questions