img图片自适应容器大小(宽铺满或者长铺满,保持原有比例)

作者: Yesterday丶 | 来源:发表于2023-01-30 11:36 被阅读0次

html结构如下

<div>
  <img src="xxx.jpj" />
</div>

方法一

div{
width:100px;
height:100px;
}
img{
  max-width:100%;
  max-height: 100%;
}

div{
width:100px;
height:100px;
}
img{
  width: 100%;
  height: 100%;
  object-fit: contain;/*保持原有尺寸比例，内容被缩放。*/
}

div盒子宽高固定，图片正常显示
div盒子大小固定，图片要求正常铺满显示方法一：通过盒子设置宽、高，然后图片直接设置100%。这样小的图片，比例...
CSS开发技巧
让图片自适应容器（div）大小 img {width: 100%;height: 100%;max-width: ...
CSS响应式布局技巧
让图片自适应容器（div）大小img {width: 100%;height: 100%;max-width: 1...
css实现图片自适应容器的几种方式
css实现图片自适应容器经常有这样一个场景，需要让图片自适应容器的大小。 1、img标签的方式我们马上就能想到...
微信小程序 wxss样式总结
图片宽高自适应 mode 属性：默认值：scaleToFill —- 不保持纵横比例缩放图片，使图片的宽高完全拉伸...
UIButton 图片平铺
在UIbutton中用setImage设置图片时，图片都会自适应大小。如下图：但有时候又希望图片铺满整个but...
2019-09-27
图片大小自适应、pc端、手机端图片适应手机端要控制的是装图片的容器宽度 img{display: block;...
图片自适应/背景铺满
body{ background:url(beijingtu.gif) top left; background-...
display:flex布局
/*背景居中自适应铺满容器*/ background: center / cover; flex布局是什么?...
Glide 根据手机屏幕宽度，等比缩放ImageView
参考文章 Glide坑遇记：宽度铺满高度自适应 & GIF加载之坑Glide - 图片重设大小和缩放需求公...

本文标题：img图片自适应容器大小(宽铺满或者长铺满,保持原有比例)

本文链接：https://www.haomeiwen.com/subject/dpymhdtx.html