取消input默认边框样式、以及图片如何实现16:9比例

xiaoxiao2025-07-06  9

 1.取消input默认边框

.iborder{ width:65%; height:2rem; border-radius: 10px; padding-left:1rem; background:none; outline:none; //取消input框默认样式 }

 

2.通过CSS来实现16:9比例

通过百分比设置宽度,根据宽度的比例数值*9/16,计算出高度的百分比数值,设置内边距为高度的数值,最后用绝对定位把图片百分百填充到设置的区域里面

HTML: 

<div class='img-wap'> <img src=''/> </div>

CSS:

.img_wap{ padding-bottom: 56%; width: 100%; position: relative; } .img_wap img{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

 

转载请注明原文地址: https://www.6miu.com/read-5032636.html

最新回复(0)