使图像响应地扩展到与文本相同的大小

Question

我现在正在在Shopify网站上工作，希望图像以与文本相同的规模扩展。目前看起来像这样： 图像如何大于文本的图像

这是我使用的代码。

<div class="bulky-img-section-right">
{%else%}
<div class="bulky-img-section">
{%endif%}
    <div class="image-sub-section">
        <img class="is-image" 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;
}

预先感谢。

Answer 1

您可以以一定的绝对位置进行操作，这是我认为从正常流中删除图像的唯一方法。

: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 class="bulky-img-section">
  <div class="image-sub-section">
    <img class="is-image" src="https://picsum.photos/id/1/200/1000" alt="Some random picture" />
  </div>
  <div class="text-sub-section">
    <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 class="bulky-img-section right">
  <div class="image-sub-section">
    <img class="is-image" src="https://picsum.photos/id/2/200/1000" alt="Some random picture" />
  </div>
  <div class="text-sub-section">
    <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>