reactjs 如何使用TailwindCSS使图像在列网格中具有响应性

6pp0gazn 于 2023-01-04 发布在 React

关注(0)|答案(3)|浏览(110)

我有一个8列网格，我想在其中分发内容、文本和图像，如下所示：

<div className="grid grid-cols-8 gap-4">
  <div className="col-start-2 col-end-5">
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad
      tempora perferendis tenetur quia vitae blanditiis, excepturi quo
      inventore. Molestias cum eaque natus sequi nisi ea, dolor atque
      at? Fuga ipsa unde consectetur nobis consequatur tempore
      asperiores, quos alias similique, rerum nemo illo qui quidem
      accusantium molestiae voluptates deleniti praesentium sint?
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
      obcaecati accusamus quam eius doloremque. Error dignissimos modi
      eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error
      commodi amet repudiandae ut ab quos. Reiciendis officia placeat
      harum nulla obcaecati magni accusantium dolorem architecto ullam,
      ratione cumque distinctio consectetur esse deleniti.
    </p>
  </div>

  <div className="col-start-6 col-end-8">
    <img alt="dummy" src="https://via.placeholder.com/300x500" />
  </div>
</div>

上面的代码在1200px的屏幕上生成以下结果：

这张是800px的

我怎样才能让图像有React，并让它的高度适应左边的文本内容，这样图像的垂直边总是采取文本的高度，而不管屏幕大小？
Sandbox

reactjs

来源：https://stackoverflow.com/questions/75006468/how-to-make-image-responsive-in-columns-grid-with-tailwindcss

3条答案

按热度按时间

vngu2lb81#

如果你不关心图像的长宽比，那么你总是可以使用flex。

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
    <div class="grid grid-cols-8 gap-4">
      <div class="col-start-2 col-end-5">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.</p>
      </div>
    
      <div class="flex col-start-6 col-end-8">
        <img alt="dummy" className="" src="https://via.placeholder.com/300x500" />
      </div>
    </div>

或者，如果你确实关心长宽比，而不关心图像是否被裁剪，那么你可以在第二个div中将其设置为背景。

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
    <div class="grid grid-cols-8 gap-4">
      <div class="col-start-2 col-end-5">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.</p>
      </div>
    
      <div class="flex col-start-6 col-end-8" style="background: url(https://via.placeholder.com/300x500)">
      </div>
    </div>

赞(0）回复(0）举报 2023-01-04

piztneat2#

最简单的方法（我认为）就是将第二列设置为背景图像，而不是内部图像，例如：

<div class="grid grid-cols-8 gap-4">
     <div class="col-start-2 col-end-5">
      <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis,
      excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis
      consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates
      deleniti praesentium sint? </p>
      <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error
      dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab
      quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque
      distinctio consectetur esse deleniti. </p>
     </div>
     <div class="col-start-6 col-end-8 bg-center bg-cover" style="background-image:url(https://via.placeholder.com/300x500)"></div>
    </div>

赞(0）回复(0）举报 2023-01-04

r8uurelv3#

如果您可以使用flex，在我看来这将是最简单的：

<div class="flex">
  <div class="mr-8 w-8/12">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.</p>
  </div>
  <div class="w-4/12 bg-cover bg-center" style="background-image:url(https://via.placeholder.com/300x500)"></div>
</div>

tailwind play
注：宽度使用标准2, 3, 4, 5, 6, 12列，没有8列

赞(0）回复(0）举报 2023-01-04

我来回答

reactjs 如何使用TailwindCSS使图像在列网格中具有响应性

3条答案

相关问题

热门标签

最新问答