900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html中怎么固定一张图片大小 固定大小的div 不固定大小的图片如何放入div?

html中怎么固定一张图片大小 固定大小的div 不固定大小的图片如何放入div?

时间:2021-03-16 08:56:31

相关推荐

html中怎么固定一张图片大小 固定大小的div 不固定大小的图片如何放入div?

1 . css代码

.imgBox{

background-image: url(./shengdan.png); //图片路径 可写在标签的style当中

background-repeat: no-repeat;

width: 120px;

height: 120px;

overflow: hidden;

background-position: left top;

border: 1px solid #000;

}

2 . HTML代码部分

解释:

1 .这段代码中 div 限制了图片显示区域的大小,当图片过大的隐藏,过小时显示在左上角 。这里要注意的 是不可设置background-size的值 ,如果设置了,就会改变图片的大小。

2 . 此代码中background-position:left top ; 表示图片的最左位置显示在左( left ) ,最顶部显示在上( top )

效果:

------------------------------------------------------------------------------

background-position:rightbottom ; 表示图片的最右位置显示在右( right ) ,最底部部显示在上( bottom )

效果:

------------------------------------------------------------------------------

总结:

1 . background-position 这个属性值(left top right bottom)可以理解为绝对定位中的(left top right bottom)

应用:

1 . 此方法可以用在商城的商品显示中使用到,解决 应对商家上传图片时,不固定的图片大小的显示。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。