I'm working on a Shopify site right now and I want the image to scale at the same size of the text. Currently it looks like this: Image of how the image is larger than the text

This is the code that I'm using.

<div >
{%else%}
<div >
{%endif%}
    <div >
        <img  src="{{section.settings.image-link | img_url:'master'}}" alt="{{section.settings.image-link}}" />
    </div></div>

CSS

    .bulky-img-section
{
    display: flex;
    flex-direction: row;

    width: 100%;

}

.bulky-img-section-right
{
    display: flex;
    flex-direction: row-reverse;

    width: 100%;
}

.image-sub-section
{
    width: 50%;
    
    padding: 3rem;
}

Thanks in advance.

CodePudding user response：

You can do it with some absolute position, only way I can think to remove the image from the normal flow.

:root {
  --imageGap: 3rem;
  --imageSize: calc( 50% - var(--imageGap) );
}

.bulky-img-section {
  display: flex;
  align-items: stretch;
  gap: var(--imageGap);
}
.bulky-img-section:not(:last-child) { margin-bottom: var(--imageGap) }

.image-sub-section {
  position: relative;
  max-width: var(--imageSize); min-width: var(--imageSize);
}
.image-sub-section .is-image {
  position: absolute;
  height: 100%; width: 100%;
  object-fit: cover;
  object-position: center;
}

.right .text-sub-section { order: -1 }

<div >
  <div >
    <img  src="https://picsum.photos/id/1/200/1000" alt="Some random picture" />
  </div>
  <div >
    <p>Eros nisi mi nec natoque erat egestas pharetra dui eu interdum vestibulum est porttitor consectetur a lectus parturient justo fringilla dis a eros dui torquent curabitur molestie dignissim. Ac vestibulum suspendisse a enim tempus accumsan vestibulum nam proin parturient nunc suspendisse adipiscing lacinia a gravida tellus ridiculus a ac at etiam fringilla parturient quis malesuada sociis neque. Ultrices arcu blandit id vestibulum suspendisse a etiam a non condimentum facilisis senectus dapibus suspendisse curae. Ligula parturient mollis natoque a a mauris turpis nec dis dui rutrum suspendisse ad eget mus a sodales blandit.</p>
    <p>Gravida scelerisque neque magnis parturient commodo parturient nostra duis a ullamcorper a orci elementum nec mus bibendum justo a. Purus iaculis cubilia pharetra egestas orci rutrum auctor a ut elit himenaeos fames sociosqu eu sed a a senectus aliquet. Rhoncus aliquam erat a nibh nibh mollis suspendisse dui a risus elit nunc dictum a. Aenean integer orci arcu erat varius inceptos pulvinar condimentum etiam mauris purus dui consequat id ipsum odio semper blandit. Vulputate eleifend venenatis ridiculus metus massa non a sed et nunc dolor potenti adipiscing per cras natoque a fermentum ac varius vehicula a a quam vulputate blandit cum. Ad ullamcorper auctor a nam urna phasellus parturient a vestibulum elit fermentum mi dictumst a consectetur nisi id fames.</p>
  </div>
</div>

<div >
  <div >
    <img  src="https://picsum.photos/id/2/200/1000" alt="Some random picture" />
  </div>
  <div >
    <p>Eros nisi mi nec natoque erat egestas pharetra dui eu interdum vestibulum est porttitor consectetur a lectus parturient justo fringilla dis a eros dui torquent curabitur molestie dignissim. Ac vestibulum suspendisse a enim tempus accumsan vestibulum nam proin parturient nunc suspendisse adipiscing lacinia a gravida tellus ridiculus a ac at etiam fringilla parturient quis malesuada sociis neque. Ultrices arcu blandit id vestibulum suspendisse a etiam a non condimentum facilisis senectus dapibus suspendisse curae. Ligula parturient mollis natoque a a mauris turpis nec dis dui rutrum suspendisse ad eget mus a sodales blandit.</p>
  </div>
</div>

CodePudding user response：

I added an extra div around the image and made the image absolutely positioned. My code is here in the codepen, add or remove the lines as you wish and add padding around the text block, you'll see that the image will stay the same size as the right div.

this is the key part

.bulky-img-section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

https://codepen.io/sandeepcnath/pen/zYWrgYz