Html - Shrink or expand image in a div in relation to window size

quickhatch
September 15, 2024
194 views
0 votes
2 Answers

So I have a div (row) divided into 2 other divs (columns). One column holds text and is styled with some SVG, and the other holds an image.

I would like to have it so that, when the window gets smaller, all these elements get smaller with it – pretty much just your typical responsiveness. But, My row’s height is more accommodating to the height of the text and prioritizing it not overflowing, so my image just maxes out with its native resolution.

Now I think the solution doesn’t really rely on the image to scale, but actually for the text to scale instead. I’m not exactly sure how to do that.

I’ve tried using object-fit: cover for the img but I don’t think it does what I hope it would.

This is my code:

  .custom-text {
    font-family: montserrat,sans-serif;
    color: white;
  }

  .sky-header{
    font-weight: 400; 
    font-size: 80px; 
    text-shadow: 3px 3px #373737;
  }

  .wthin{
    font-weight: 100;
    font-size: 25px;
  }

  .wthinbigger{
    font-weight: 100;
    font-size: 35px;
  }

  .sky-mask-right {
    position: relative;
    z-index: 1;
    margin-right: -18%;
  }

  .sky-curve-right{
    height: 100%;
    background-image: linear-gradient(135deg,rgba(226, 75, 252, 1) 0%,rgb(146, 48, 163) 100%);
  }

  @media only screen and (min-width: 992px) {
    .sky-mask-right {
      clip-path:url(#sky-clip-right)
    }
  }

  .ratio-svg-right{
    width: 50%;
  }

  .ratio-img-right{
    width: 50%;
  }

  .sky-img{
    width: 100%;
    height: auto;
    object-fit: cover;

  }

  .sky-content-right{
    padding-left: 10%;
    padding-top: 1%;
    margin-right: 10%;
  }

  .sky-column{
    float: left;
    width: 30%;
  }

  .sky-list-text{
    font-weight: 200;
  }

  .col-equal-height{
    display: flex;
    flex: 1;
    overflow: overlay;
  }

  li::marker {
    content: url(/heart.svg);
    content: url(#heart);
    content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
  }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>


<svg xmlns="http://www.w3.org/2000/svg" height="0" width="0">
  <defs>
    <clipPath id="sky-clip-right" clipPathUnits="objectBoundingBox">
      <!-- S curve 
      <path d="M0 1S.96 1 .96 1C.78.5 1.1.5.96 0 .96 0 0 0 .9 0H0Z"></path>
      -->

      <!-- Single curve -->
      <path d="M0 0S0 0 .85 0c.2.2.2.8 0 1C0 1 0 1 0 1z"></path>
    </clipPath>
  </defs>
</svg>



<!-- ROW -->
<div class="col-equal-height custom-text" style="top:0">

  <!-- CURVE -->
  <div class="ratio-svg-right">
    <div class="sky-mask-right sky-curve-right">
      <div class="sky-content-right">

        <h1 class="sky-header">
          <b>
            TEXT<br>
            TEXT_TEXT_<br>
            TEXT<br>
          </b>
        </h1>

        <p class="wthin">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>

        <p class="wthinbigger">
          <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
        </p>

        <p class="wthinbigger">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat libero, mattis mattis nisl quis, vehicula tincidunt sem. Phasellus sollicitudin 
        </p>

      </div>
    </div>
  </div>

  <!-- IMG -->
  <div class="ratio-img-right">
    <div class="sky-img">
      <img src="https://d1yei2z3i6k35z.cloudfront.net/6314208/66e61aa3627e6_66e5510f96b00_IMG_35981.jpg" class="img-fluid">
    </div>
  </div>
</div>

Tags: css html

Answers

Try this way, using flex property or you can use width.

<div class="container">
        <div class="section-a">Section A</div>
        <div class="section-b">
            <img src="/image.jpg" alt="Image" />
        </div>
</div>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
}

.section-a {
    flex: 0.5;

    background-color: coral;
}

.section-b {
    flex: 0.5;

    background-color: blueviolet;
    overflow: hidden;
}

.section-b img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Below code will center the content inside section a and b */
.section-a,
.section-b {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

You had the correct idea (using object-fit: cover) but applied it to the wrong element. Let’s check this part of the code:

  .sky-img{
    width: 100%;
    height: auto;
    object-fit: cover;

  }

That’s the image container and not the image in itself. Because of that the container will have the width you want (not the height, though). The image has a class that automatically assigns it a width of 100%. So, it will scale, but it won’t occupy its full container full size.

You want to have the container occupying 100% of the available width and height, and then do the same for the image and apply the object: fit (to the image!) So change the code above with something like this:

  .sky-img{
    width: 100%;
    height: 100%;
  }

  .sky-img img {
    height: 100%;
    object-fit: cover;
  }

That will make the image expand to occupy the whole right side, independently of how tall it is (as you mention, the text will guide how big that would be).

Here you can see a running demo with your code and just the change I indicated (I used CSS nesting, but it’s the same):

.custom-text {
    font-family: montserrat,sans-serif;
    color: white;
  }

  .sky-header{
    font-weight: 400; 
    font-size: 80px; 
    text-shadow: 3px 3px #373737;
  }

  .wthin{
    font-weight: 100;
    font-size: 25px;
  }

  .wthinbigger{
    font-weight: 100;
    font-size: 35px;
  }

  .sky-mask-right {
    position: relative;
    z-index: 1;
    margin-right: -18%;
  }

  .sky-curve-right{
    height: 100%;
    background-image: linear-gradient(135deg,rgba(226, 75, 252, 1) 0%,rgb(146, 48, 163) 100%);
  }

  @media only screen and (min-width: 992px) {
    .sky-mask-right {
      clip-path:url(#sky-clip-right)
    }
  }

  .ratio-svg-right{
    width: 50%;
  }

  .ratio-img-right{
    width: 50%;
  }

  .sky-img{
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .sky-content-right{
    padding-left: 10%;
    padding-top: 1%;
    margin-right: 10%;
  }

  .sky-column{
    float: left;
    width: 30%;
  }

  .sky-list-text{
    font-weight: 200;
  }

  .col-equal-height{
    display: flex;
    flex: 1;
    overflow: overlay;
  }

  li::marker {
    content: url(/heart.svg);
    content: url(#heart);
    content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
  }

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>


<svg xmlns="http://www.w3.org/2000/svg" height="0" width="0">
  <defs>
    <clipPath id="sky-clip-right" clipPathUnits="objectBoundingBox">
      <!-- S curve 
      <path d="M0 1S.96 1 .96 1C.78.5 1.1.5.96 0 .96 0 0 0 .9 0H0Z"></path>
      -->

      <!-- Single curve -->
      <path d="M0 0S0 0 .85 0c.2.2.2.8 0 1C0 1 0 1 0 1z"></path>
    </clipPath>
  </defs>
</svg>



<!-- ROW -->
<div class="col-equal-height custom-text" style="top:0">

  <!-- CURVE -->
  <div class="ratio-svg-right">
    <div class="sky-mask-right sky-curve-right">
      <div class="sky-content-right">

        <h1 class="sky-header">
          <b>
            TEXT<br>
            TEXT_TEXT_<br>
            TEXT<br>
          </b>
        </h1>

        <p class="wthin">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>

        <p class="wthinbigger">
          <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
        </p>

        <p class="wthinbigger">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat libero, mattis mattis nisl quis, vehicula tincidunt sem. Phasellus sollicitudin 
        </p>

      </div>
    </div>
  </div>

  <!-- IMG -->
  <div class="ratio-img-right">
    <div class="sky-img">
      <img src="https://d1yei2z3i6k35z.cloudfront.net/6314208/66e61aa3627e6_66e5510f96b00_IMG_35981.jpg" class="img-fluid">
    </div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Shrink or expand image in a div in relation to window size

Answers