html图片拉伸变形,html怎么拉伸图片,css代码怎么写-重庆安菲科技网站建设公司

您的位置：首页 > 新闻

html图片拉伸变形,html怎么拉伸图片,css代码怎么写

新闻 2022-03-31编辑：重庆网站建设标签：

html图片拉伸变形,html怎么拉伸图片,css代码怎么写

前端网页部分.

html:
<div id="surface-div1">
<img :src="pic1" class="surface-img">
</div>
CSS样式部分
#surface-div1{
position: relative;
width: 372px;
height: 175px;
float: left;
margin-top: -34px;
margin-left: 122px;
cursor: pointer;
background: url(../../../static/img/addheadpic.jpg)center center no-repeat;
text-align: center;
border: 1px solid #CCCCCC;
border-radius:6px;
overflow: hidden;
}
#surface-div1 img{
position: absolute;
width: 100%;
top: 50%;
left: 0;
transform: translateY(-50%) scale(1);
border:none;
border-radius: 6px;display:table-cell
}