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实现表单验证效果(非常不错)
Jan 18 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
css3圆角边框和边框阴影示例
May 05 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
php截取中文字符串函数实例
2015/02/23 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
简单的js表格操作
2016/09/24 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
react redux入门示例
2018/04/19 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
js实现碰撞检测
2021/01/29 Javascript
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
用python制作个音乐下载器
2021/01/30 Python
python+opencv实现车道线检测
2021/02/19 Python
园林设计师自荐信
2013/11/18 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
服装设计专业求职信
2014/06/16 职场文书
升国旗演讲稿
2014/09/05 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
出生公证书
2015/01/23 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers