css自适应布局，缩放保持图片比例

一行代码上晴天

已于 2023-11-09 15:54:05 修改

阅读量4.5k

点赞数 4

文章标签： css javascript 前端

于 2023-05-26 15:52:42 首次发布

本文链接： https://blog.csdn.net/qq_48850466/article/details/130887396

版权

文章介绍了三种不同的布局场景：一是商品类展示型布局，利用百分比padding保持16:9图片比例；二是固定显示元素个数的布局，基于flex:1实现；三是H5自适应布局，通过计算和CSS实现窗口宽度变化下的布局调整。这些方法适用于不同的网页和移动端界面设计需求。

摘要由CSDN通过智能技术生成

场景一

适合商品类展示型布局，后台的数据呈现列表数据返回，窗口宽度变化，图片比例不变.假设我们的图片宽高固定比例16：9。

效果图满屏：
效果图缩放时：

移动端：

直接看代码。里面会注释详细说明

<body>
  <!-- 多嵌套一层div.因为margin外边距设置为百分比%的话，它的基准是上一层dom的宽度 -->
  <div class="parentBox">
    <div class="parent">
    
      <div class="container">
        <img src="https://img0.baidu.com/it/u=399951341,1287964223&fm=253&fmt=auto&app=138&f=JPEG?w=994&h=500" alt="">
      </div>
      
      <div>
        <div ><span class="textOver">我是块级别3我是块级别3</span></div>
        <div><span class="textOver">我是块级别3我是块级别3</span></div>
        <div><span class="textOver">我是块级别3我是块级别3</span></div>
      </div>
    </div>
  </div>
</body>  


<style>
.parentBox{
    display: flex;
    flex-wrap: wrap;
 }
 .parent {
    width: 30%;/*这里想一行排三个。设置成了30%*/
    border-radius: 5px;
    margin-bottom: calc(10% / 2);/*间隙和水平保持一致*/
    background-color: #ffffff;
 }
 .parent:not(:nth-child(3n)) {
    margin-right: calc(10% / 2);/*剩下10%。为两个间隙平分*/
    
 }
 .container {
    width: 100%;
    padding-top: 56.25%; /*这里的百分比是上层（parent ）的宽度为标准,这也是多嵌套一层原因*/
    /* 前提是图片宽高比例是16：9,所以这里是9/16。如果不理解，就记着反过来算 */
    position: relative;
 }
/*图片这里就要定位+padding-top或者padding-bottom*/
 .container img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
 }
 .textOver{
    /* 文字溢出省略 */
    display: -webkit-box!important;
    -webkit-box-orient: vertical!important;
    -webkit-line-clamp: 1!important;
    overflow: hidden!important;
 }
</style>

补充：css属性aspect-ratio: 16/9;(响应式网页设计中，保持一致的纵横比) 可以直接达到这种效果；不过兼容性不太好；如果项目没有兼容性要求；可以用

场景二：一行固定显示的。适用场景：比如移动端个人中心功能模块排列时。基于flex:1实现。始终占满布局

效果图

<body>
<!-- 一行固定元素个数 -->
  <div class="blockBox">
    <div class="blockItem">
      <img class="blockImg" src="https://img0.baidu.com/it/u=1089844382,2208108806&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
      <div class="textCenter">标题1</div>
    </div>
    <div class="blockItem">
      <img class="blockImg" src="https://img0.baidu.com/it/u=1089844382,2208108806&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
      <div class="textCenter">标题2</div>
    </div>
    <div class="blockItem">
      <img class="blockImg" src="https://img0.baidu.com/it/u=1089844382,2208108806&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
      <div class="textCenter">标题3</div>
    </div>
  </div>
</body>

<style>
.blockBox{
    display: flex;
  }
 .blockItem{
    flex: 1;
  }
 .blockImg{
    display: block;
    margin: 0 auto;
  }
 .textCenter{
    text-align: center;
  }
</style>

场景三：h5自适应布局，非弹性布局，根据窗口宽度自适应变化

![在这里插入图片描述](https://img-blog.csdnimg.cn/b36d7604636d401a9dd5ea63e48407d0.png

先看布局



					<view v-if="proList.length>0" class="main_row2_list">
						<!-- 商品item -->
						<view @click="goProDetail" :data-proId='item.id' class="pro_item" v-for="(item,i) in proList"
							:key="i">
							<view>
								<image class="pro_img" :src="item.mainImg" mode="aspectFill"></image>
							</view>
							<view class="pro_name dark-grey fs-base text_clamp1">{{item.name}}</view>
							<view class="pro_spec mid-grey fs-base">规格：{{item.specifications}}</view>
							<view class="main-color">
								<label class="pro_price_unit fs-sm">￥</label>
								<label class="pro_price fs-lg">{{item.retailPrice}}</label>
							</view>
						</view>
						<!-- 商品item end-->
					</view>

		<style scoped lang="scss">
		.main_row2_list {
			min-height: 0;
			margin: 0 12px;

			.pro_item {
				//商品宽度变量 ；     24px 父级的左右marin之和  /2 一行摆俩  6px单个元素的间隔  16px单个元素的左右padding之和
				$pro_item_with: calc(((100vw - 24px) / 2) - 6px - 16px);
				// 变为行内块元素，也是不使用弹性布局的关键 
				display: inline-block;
				width: $pro_item_with;
				margin-bottom: 12px;
				min-height: 0px;
				padding: 8px;
				border-radius: 8px;
				background-color: #FFFFFF;

				// 图片
				.pro_img {
					width: $pro_item_with;
					height: $pro_item_with;
					border-radius: 8px;
					overflow: hidden;
				}

				// 名称
				.pro_name {
					line-height: 40rpx;
					margin: 4px 0;
				}

				//规格
				.pro_spec {
					line-height: 48rpx;
				}

				// 价格单位
				.pro_price_unit {
					line-height: 40rpx;
				}

				//价格
				.pro_price {
					line-height: 40rpx;
				}
			}
				//odd第奇数个元素加右边距
			.pro_item:nth-child(odd) {
				margin-right: 6px;
			}
				//even 第偶数数个元素加左边距
			.pro_item:nth-child(even) {
				margin-left: 6px;
			}
		}
		</style>