图像在 flex 中被挤压 [英] Image is squeezed in flex

查看：24
本文介绍了图像在 flex 中被挤压的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

第一张图片被压缩在一个 flex 布局中，我假设这一定是由于右列中的长段落造成的，但不确定是什么原因造成的.

如何解决这个问题，以便图像不会被挤压并且右列应该增长以占用剩余空间?

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel=样式表"><div class="flex p-4"><div class="border"><img class="w-8 h-8 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&;fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>

<div class="flex-col"><div class="font-medium cursor-pointer hover:underline">Duncan Smith</div><p class="flex-shrink-0 border-gray-300">apwijd pawid jpawid jpwai jdpwai jdpawi jdpaw idjpwa idjapwi jdpawi jdpiaw jdpawi jdpawi jdpawi jdpawi jdpawi jdpaiw jdpawi jdpaiw jdpaiw jdppid&ww jdpaiw jdpiaw

解决方案

将 flex-shrink-0 添加到图像中，您也可以摆脱容器:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel=样式表"><div class="flex p-4"><img class="w-8 h-8 边框 flex-shrink-0 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"><div class="flex-col"><div class="font-medium cursor-pointer hover:underline">Duncan Smith</div><p class="flex-shrink-0 border-gray-300">apwijd pawid jpawid jpwai jdpwai jdpawi jdpaw idjpwa idjapwi jdpawi jdpiaw jdpawi jdpawi jdpawi jdpawi jdpawi jdpaiw jdpawi jdpaiw jdpaiw jdppid&ww jdpaiw jdpiaw

The first Image is squeezed in a flex layout, I'm assuming this must be due to the long paragraph in the right column, but not sure what's causing it.

How to fix this so that image is not squeezed and the right column should grow to take remaining space?

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="flex p-4">
  <div class="border">
    <img class="w-8 h-8 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
  </div>
  <div class="flex-col">
    <div class="font-medium cursor-pointer hover:underline">Duncan Smith</div>
    <p class="flex-shrink-0 border-gray-300">apwijd pawid jpawid jpwai jdpwai jdpawi jdpaw idjpwa idjapwi jdpawi jdpiaw jdpawi jdpawi jdpawi jdpawi jdpawi jdpaiw jdpaiw jdpiawj dpiawj dpia wjdpiaw jdpia wjpdij awdpi</p>
  </div>
</div>

解决方案

add flex-shrink-0 to the image and you can also get rid of the container:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="flex p-4">
  <img class="w-8 h-8 border flex-shrink-0 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
  <div class="flex-col">
    <div class="font-medium cursor-pointer hover:underline">Duncan Smith</div>
    <p class="flex-shrink-0 border-gray-300">apwijd pawid jpawid jpwai jdpwai jdpawi jdpaw idjpwa idjapwi jdpawi jdpiaw jdpawi jdpawi jdpawi jdpawi jdpawi jdpaiw jdpaiw jdpiawj dpiawj dpia wjdpiaw jdpia wjpdij awdpi</p>
  </div>
</div>

这篇关于图像在 flex 中被挤压的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆