首页 > 其他分享 >css图片宽高不同,缩放图片,保持宽高,注意最外层的盒子要用display:inline-flex

css图片宽高不同,缩放图片,保持宽高,注意最外层的盒子要用display:inline-flex

时间:2023-10-28 17:12:40浏览次数:37  
标签:flex hidden 缩放 color 宽高 overflow display 图片

   <div class="product">
            <Popover placement="right">
              <template #content>
                <div class="w-[200px] h-[200px]">
                  <img
                    :src="record?.mainImages?.[0]?.url"
                    class="w-full h-full object-scale-down"
                  />
                </div>
              </template>
              <div class="mr-[9px] w-[35px] h-[35px]">
                <img
                  :src="record?.mainImages?.[0]?.url"
                  class="cursor-pointer object-scale-down w-full h-full"
                />
              </div>
            </Popover>

            <div class="productText">
              <span>
                <a class="product_link" target="_blank" :href="record?.productLink">
                  <span class="productTitle">
                    {{ record?.productTitle }}
                  </span>
                </a>
              </span>
              <span class="copy_style">
                <Copy placement="right" :keyword="record?.id"> ASIN:{{ record?.id }} </Copy></span
              >
            </div>
          </div>






  .product {
    display: inline-flex;
    overflow: hidden;
    white-space: nowrap;
    align-items: center;
    justify-content: space-between;
    color: @primary-color !important;
  }
  .productText {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .product_link {
    color: @primary-color !important;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  .productTitle {
    text-overflow: ellipsis;
    overflow: hidden;
  }

标签:flex,hidden,缩放,color,宽高,overflow,display,图片
From: https://www.cnblogs.com/zhengzhijian/p/17794290.html

相关文章

  • 网页图片提取网站推荐!
    如果想要下载网页里出现的图片,最简单的方法就是在图片按下右键选择「另存图片」。但若下载的图片数量较多,一个一个保存很浪费时间,就用图片下载工具辅助吧!1ImageExtractor免费的网页图片下载工具,可从任何公开页面提取图片,使用虚拟浏览器来模拟浏览效果。有别一般下载器,[ImageE......
  • 教你如何实现图片特征向量提取与相似度计算
    图片特征向量是一种用于描述图片内容的数学表示,它可以反映图片的颜色、纹理、形状等信息。图片特征向量可以用于做很多事情,比如图片检索、分类、识别等。本文将介绍图片特征向量的提取以及相似度的计算,并使用C#来实现它们。文章开始前,我们先来简单了解一下OpenCV和OpenCvSha......
  • Android图片进行高斯模糊处理/毛玻璃效果
    android中实现毛玻璃效果的方法比较多,有用java实现图片处理算法的,也有把算法用c/c++实现并用jni调用的,而实现毛玻璃的开源库在github上也有不少.其实google的官方sdk中也为我们提供了这样的工具,本着能用官方尽量不自己实现,能自己实现尽量不用第三方的原则,官方的实现方......
  • 如何在线去除图片上的水印?分享那些你不知道在线工具
    想要去除图片上的水印?不妨试试在线图片水印去除工具!在个人生活或工作中,我们常常需要使用他人的图片,然而图片上的水印却常常成为阻碍,若你正为此烦恼,那么在线图片去水印工具将成为你的救星,那么图片去水印在线使用怎么用呢?请继续看下去吧。一、水印云水印云的在线去水印工具不仅支持......
  • qt 设置背景图片,图片出现锯齿
    qt给控件添加背景图片,通过有3种方式background-image;border-image;image其中通常用border-image;image。使用border-image,会出现图片失真,锯齿状严重ui->pushButton->setStyleSheet(“QPushButton{border-image:url(:/images/XXX.png);}”);使用image,会有边框,不适合qpushBu......
  • 利用滤镜-高斯模糊 制作图片
    原图 效果图 视频网址:https://mooc1-2.chaoxing.com/mooc-ans/mycourse/teacherstudy?chapterId=687030348&courseId=220576162&clazzid=85345057 ......
  • 登录页面--图片验证码
    登陆界面实现图片验证码功能 开始吧!!!如何生成图片呢安装pillow模块pipinstallpillow新建myproject/app01/utils/ttf目录,将字体放在其下新建myproject/app01/utils/code.py,编辑验证码生成函数fromPILimportImage,ImageDraw,ImageFilter,ImageFontimpor......
  • 好用的图片懒加载,图片可动态添加
    js: /* *LazyLoad-jQuerypluginforlazyloadingimages * *Copyright(c)2007-2013MikaTuupola * *LicensedundertheMITlicense: * http://www.opensource.org/licenses/mit-license.php * *Projecthome: * http://www.appelsiini......
  • mht文件图片提取 python
    简介mhtml文件又称为聚合html文档、web档案或单一文件网页。单个文件网页可将网站的所有元素(包括文本和图形)都保存到单个文件中。总的来说mht文件保存了一个网页内的所有元素,让用户可以在没有网络的情况下访问网页。本程序提取mht文件中的图片并保存至新建文件夹,同时将其压缩。......
  • c# Winform中如何把图片添加到resources中
    我们在Winform项目中中需要插入图片资源,但是新建的项目中找不到Resources文件夹,怎么才能出现呢?1:双击项目下的Resources.resx,出现视图2:单击"添加资源",选择"添加现有文件",找到你要添加的图片,确定之后保存就可以了3:这时候你会发现视图中出现添加的图片,解决方案......