html css3不拉伸图片显示效果


Posted in HTML / CSS onJune 07, 2021

1.利用transform属性不拉伸显示图片,(路径问题需要按需求修改);

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
}

html css3不拉伸图片显示效果
html css3不拉伸图片显示效果 

最终效果如上图的左边。

2.参考淘宝的,利用display:table-cell和文字大小控制居中

html:

<div id="surface-div">
  <div class="sur-div">
     <img :src="pic" class="surface-img">
  </div>
</div>

css:

#surface-div{
    position: relative;
    width: 372px;
    height: 372px;
    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;
}
.sur-div{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    width: 372px;
    height: 372px;
    overflow: hidden;
}
#surface-div img{   
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
}

html css3不拉伸图片显示效果 

效果如上图中的左边部分,重点是需要外面的div是正方形。
淘宝的是这样的:

html css3不拉伸图片显示效果

到此这篇关于html css3不拉伸图片显示效果的文章就介绍到这了,更多相关html css3不拉伸图片 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 #HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 #HTML / CSS
CSS极坐标的实例代码
css height属性中的calc方法详解
Jun 03 #HTML / CSS
html+css实现文字折叠特效实例
html+css实现分层金字塔的实例
html+css实现赛博朋克风格按钮
You might like
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
个人评语大全
2014/05/04 职场文书
小学领导班子对照材料
2014/08/23 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
房产公证书
2015/01/23 职场文书
家访教师心得体会
2016/01/23 职场文书
Pandas 数据编码的十种方法
2022/04/20 Python