记一次img标签图片不拉伸处理办法

当前需求是：

UI 画的盒子，固定宽高 242 * 162，里边有一张图片，图片宽高不固定，但是图片不能拉伸，怎么展示没说

图片全部展示，不填充满，但是图片不能拉伸(最长边展示出来)
图片展示一部分，图片不能拉伸(最短边展示出来)
其他火星需求：宽高固定，动态图片宽高不固定，全部填充满，不裁剪，不拉伸，好无理的需求呐，不干，直接怼回去就行

这个就简单了，微信小程序的 image 标签有一个 mode 属性，但是原生 html 的 img 标签没有啊

但是原生的 html 标签有 background-image 有 background-repeat 有 background-position 有 background-size

<!-- vue 项目 原生 html 一样，只是用 js 做一个动态的图片绑定就行了 -->
<div class="goods-item-pic" :style="'background-image:url('+goods.pic+')'"></div>
<style>
.goods-item-pic{width:242px;height:162px;background-size:cover; /* 看情况，有 cover 和 contain 模拟小程序里边的 image 的 mode 属性 */background-repeat: no-repeat; /* 不让重复 */background-position: top center ; /* 固定展示的位置 */
}
</style>

记一次img标签图片不拉伸处理办法相关推荐

table vue 背景图片_table中background背景图片自动拉伸
解决android:background背景图片被拉伸问题 ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而s ...
html js 修改img 图片不拉伸,防止图片拉伸的自适应处理
在web开发中,作为前端经常会遇到处理图片拉伸问题的情况. 例如banner.图文列表.头像等所有和用户或客户自主操作图片上传的地方, 而一旦牵扯图片,就会涉及到图片拉伸的问题, 当然,在图片上传时做 ...
html js 修改img 图片不拉伸,Javascript防止图片拉伸的自适应处理方法
前言相信大家在日常的web开发中,作为前端经常会遇到处理图片拉伸问题的情况. 例如banner.图文列表.头像等所有和用户或客户自主操作图片上传的地方,而一旦牵扯图片,就会涉及到图片拉伸的问题,当然 ...
css flex 图片不拉伸_flex布局下img元素被拉伸变形的有效解决办法
在flex布局下图片被拉伸: 正常的效果: 一.给img元素设置flex-shrink: 0 给 img 设置 flex-shrink: 0; 这种方式不会破坏现有的目录结构,只需要给被拉伸的img添 ...
android自适应拉伸图片,Android 启动页-解决图片被拉伸和压缩问题，适配虚拟导航栏...
Android 启动页设置非常简单 //styles.xml 设置主题 @drawable/bg_splash true //activity使用主题,这时点击app图标,就会显示@drawable/ ...
ios 按钮图片拉伸_#UIButton#背景图片的拉伸
如果不采用相应技术对button的背景图片进行拉伸,则显示的效果就会失真,效果: Snip20160823_7.png iOS中有三种方法对图片进行拉伸 // 方法一: - (void)viewDid ...
android背景图拉伸,解决android:background背景图片被拉伸问题
解决android:background背景图片被拉伸问题 ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而s ...
html背景图片拉伸解决办法
html背景图片拉伸解决办法 body {background-size: 100% 100%; //关键代码,直接拉伸背景图background-image: url("img/99.jp ...
wallpaper设置壁纸图片被拉伸
时间:2021/04/07 之前公司不允许csdn,笔记写在其它地方.最近整理过来问题描述: 原生壁纸设置壁纸之后,图片被拉伸.导出/data/system/users/0/wallpaper_in ...
img标签图片按照比例大小缩放
2019独角兽企业重金招聘Python工程师标准>>> 1.img标签图片按照比例缩放例如:展示图片width:300px,height:200px; 设计图的尺寸可以为width ...

记一次img标签图片不拉伸处理办法

记一次img标签图片不拉伸处理办法相关推荐

最新文章

热门文章