取消input默认边框样式、以及图片如何实现16: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;  
  }