图像垂直拉伸至相邻文本框的高度

Question

我正在使用顺风CSS。我有一个弹性盒容器 div。该 div 中的图像与相邻的文本框一起垂直拉伸。我认为它正在获取父div的高度。仅特定尺寸范围才会出现此问题。

我希望图像保持其纵横比，这样它就不会垂直拉伸。 但对于某些尺寸范围，它看起来像这样 这是我的代码-

<main class="flex justify-center pt-36"> <!--main content--> <div class="my-16"> <div class="flex justify-center text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Heading</div> <div class="md:flex justify-center my-16 mx-16"> <div class="flex justify-center md:flex-none my-16 mx-8"> <img class="min-w-80 md:w-80" src="images/random.jpg" alt="random-image"> </div> <div class="flex justify-center my-16 text-center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quas, ducimus optio perferendis alias vitae saepe officiis deserunt, delectus unde cum doloribus, itaque neque deleniti eligendi quo nobis. At, consequatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit voluptas placeat eveniet quidem quam assumenda dolorum perspiciatis aliquid temporibus ea, exercitationem, non ullam, eligendi expedita omnis repudiandae delectus! Iste, laboriosam? </div> </div> </div> </main>

Answer 1

在期望的结果中，图像的宽度似乎比您的尝试要小，因此我们考虑将其缩小。例如，我们可以通过删除

<img>

元素本身上与宽度相关的类来让它占据宽度的三分之二，并通过

width: 33.33%

类将

<div>

应用于其父

w-1/3

元素：

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<main class="flex justify-center pt-36">
  <!--main content-->
  <div class="my-16">
    <div class="flex justify-center text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Heading</div>
    <div class="md:flex justify-center my-16 mx-16">
      <div class="flex justify-center md:flex-none my-16 mx-8 w-1/3"> <img src="https://picsum.photos/1080/640" alt="random-image"> </div>
      <div class="flex justify-center my-16 text-center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quas, ducimus optio perferendis alias vitae saepe officiis deserunt, delectus unde cum doloribus, itaque neque deleniti eligendi quo nobis. At, consequatur. Lorem ipsum dolor sit amet
        consectetur adipisicing elit. Suscipit voluptas placeat eveniet quidem quam assumenda dolorum perspiciatis aliquid temporibus ea, exercitationem, non ullam, eligendi expedita omnis repudiandae delectus! Iste, laboriosam? </div>
    </div>
  </div>
</main>

关于拉伸，发生这种情况是因为

align-items

的默认值为

stretch

。这会导致

<img>

元素的父

<div>

元素拉伸到同一水平弹性布局中同级元素的高度。然后，

align-items: stretch

也会拉伸

<img>

元素，因为父级

<div>

也是水平弹性布局。

因此，关于停止拉伸，有很多不同的方法可供选择，例如：

将

align-items: start

应用于弹性布局父级：

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<main class="flex justify-center pt-36">
  <!--main content-->
  <div class="my-16">
    <div class="flex justify-center text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Heading</div>
    <div class="md:flex justify-center my-16 mx-16 items-start">
      <div class="flex justify-center md:flex-none my-16 mx-8 w-1/3"> <img src="https://picsum.photos/1080/640" alt="random-image"> </div>
      <div class="flex justify-center my-16 text-center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quas, ducimus optio perferendis alias vitae saepe officiis deserunt, delectus unde cum doloribus, itaque neque deleniti eligendi quo nobis. At, consequatur. Lorem ipsum dolor sit amet
        consectetur adipisicing elit. Suscipit voluptas placeat eveniet quidem quam assumenda dolorum perspiciatis aliquid temporibus ea, exercitationem, non ullam, eligendi expedita omnis repudiandae delectus! Iste, laboriosam? </div>
    </div>
  </div>
</main>

将

align-self: start

应用于

<div>

父级：

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<main class="flex justify-center pt-36">
  <!--main content-->
  <div class="my-16">
    <div class="flex justify-center text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Heading</div>
    <div class="md:flex justify-center my-16 mx-16">
      <div class="flex justify-center md:flex-none my-16 mx-8 w-1/3 self-start"> <img src="https://picsum.photos/1080/640" alt="random-image"> </div>
      <div class="flex justify-center my-16 text-center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quas, ducimus optio perferendis alias vitae saepe officiis deserunt, delectus unde cum doloribus, itaque neque deleniti eligendi quo nobis. At, consequatur. Lorem ipsum dolor sit amet
        consectetur adipisicing elit. Suscipit voluptas placeat eveniet quidem quam assumenda dolorum perspiciatis aliquid temporibus ea, exercitationem, non ullam, eligendi expedita omnis repudiandae delectus! Iste, laboriosam? </div>
    </div>
  </div>
</main>

将

align-items: start

应用于

<div>

父级：

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<main class="flex justify-center pt-36">
  <!--main content-->
  <div class="my-16">
    <div class="flex justify-center text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Heading</div>
    <div class="md:flex justify-center my-16 mx-16">
      <div class="flex justify-center md:flex-none my-16 mx-8 w-1/3 items-start"> <img src="https://picsum.photos/1080/640" alt="random-image"> </div>
      <div class="flex justify-center my-16 text-center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quas, ducimus optio perferendis alias vitae saepe officiis deserunt, delectus unde cum doloribus, itaque neque deleniti eligendi quo nobis. At, consequatur. Lorem ipsum dolor sit amet
        consectetur adipisicing elit. Suscipit voluptas placeat eveniet quidem quam assumenda dolorum perspiciatis aliquid temporibus ea, exercitationem, non ullam, eligendi expedita omnis repudiandae delectus! Iste, laboriosam? </div>
    </div>
  </div>
</main>

将

align-self: start

应用于

<img>

：

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<main class="flex justify-center pt-36">
  <!--main content-->
  <div class="my-16">
    <div class="flex justify-center text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Heading</div>
    <div class="md:flex justify-center my-16 mx-16">
      <div class="flex justify-center md:flex-none my-16 mx-8 w-1/3"> <img class="self-start" src="https://picsum.photos/1080/640" alt="random-image"> </div>
      <div class="flex justify-center my-16 text-center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quas, ducimus optio perferendis alias vitae saepe officiis deserunt, delectus unde cum doloribus, itaque neque deleniti eligendi quo nobis. At, consequatur. Lorem ipsum dolor sit amet
        consectetur adipisicing elit. Suscipit voluptas placeat eveniet quidem quam assumenda dolorum perspiciatis aliquid temporibus ea, exercitationem, non ullam, eligendi expedita omnis repudiandae delectus! Iste, laboriosam? </div>
    </div>
  </div>
</main>

从

<div>

父级中删除水平弹性布局：

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<main class="flex justify-center pt-36">
  <!--main content-->
  <div class="my-16">
    <div class="flex justify-center text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Heading</div>
    <div class="md:flex justify-center my-16 mx-16">
      <div class="my-16 mx-8 w-1/3 shrink-0"> <img src="https://picsum.photos/1080/640" alt="random-image"> </div>
      <div class="flex justify-center my-16 text-center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quas, ducimus optio perferendis alias vitae saepe officiis deserunt, delectus unde cum doloribus, itaque neque deleniti eligendi quo nobis. At, consequatur. Lorem ipsum dolor sit amet
        consectetur adipisicing elit. Suscipit voluptas placeat eveniet quidem quam assumenda dolorum perspiciatis aliquid temporibus ea, exercitationem, non ullam, eligendi expedita omnis repudiandae delectus! Iste, laboriosam? </div>
    </div>
  </div>
</main>