NO.6 html容器的最大最小宽高设定,以及百分比宽高 (部分)

本文探讨了如何使用HTML中的min和max属性来设置容器的最大、最小宽度和高度,并解释了当容器宽高设置为百分比时,如何依据父容器尺寸进行计算。配合图文说明,帮助理解这一概念。
摘要由CSDN通过智能技术生成

在HTML中,min与max属性 可以为容器设定最大、最小宽高。

格式语法:   css选择器{  min-width:值;max-width:值;
                       min-height:值;max-height:值; }
                       
当设定了最大最小宽高值后,容器的大小会随内容的改变而自适应(在设定的值范围内),尽量避免内容溢出容器。

图解:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在HTML中,为容器的宽高属性赋“百分比”的值时,是根据父容器的值来换算的。

格式语法:   css选择器{  width:"值%" ;  height:“值%” } 

子容器的百分比宽高只会受父容器的影响。

图解:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要按照图片的宽高比例计算在容器中显示的百分比,你可以使用以下代码: ```javascript // 获取容器元素和图片元素 const container = document.getElementById('container'); const image = document.getElementById('image'); // 获取图片的宽度和高度 const imageWidth = image.width; const imageHeight = image.height; // 获取容器宽度和高度 const containerWidth = container.clientWidth; const containerHeight = container.clientHeight; // 计算宽度比例和高度比例 const widthRatio = containerWidth / imageWidth; const heightRatio = containerHeight / imageHeight; // 取较小的比例作为缩放比例,以保持图片完全显示在容器中 const scale = Math.min(widthRatio, heightRatio); // 将缩放比例转换为百分比 const scalePercentage = scale * 100; // 在控制台输出缩放百分比 console.log('缩放百分比:', scalePercentage + '%'); ``` 在上面的代码中,我们假设已经有一个容器元素 `container` 和一个图片元素 `image`。我们获取了图片的宽度和高度以及容器宽度和高度。 然后,我们计算了宽度比例和高度比例,这些比例表示容器宽度和高度相对于图片的宽度和高度的缩放比例。 接下来,我们选择较小的比例作为缩放比例,以确保图片完全显示在容器中。 最后,我们将缩放比例转换为百分比,并在控制台输出。 请确保在运行上述代码之前,已经正确获取到容器和图片元素,并且图片已经加载完成。 希望能对你有所帮助!如果还有其他问题,请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值