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 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
css3带你实现3D转换效果
Feb 24 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
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
Django权限机制实现代码详解
2018/02/05 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
对Python信号处理模块signal详解
2019/01/09 Python
python实现猜拳游戏
2020/03/04 Python
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
C面试题
2015/10/08 面试题
业务员岗位职责范本
2013/12/15 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
运动会入场解说词
2014/02/07 职场文书
挂职自我鉴定
2014/02/26 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
2014年租房协议书范本
2014/10/30 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
2014年老干部工作总结
2014/11/21 职场文书
瘦西湖导游词
2015/02/03 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
《刷子李》教学反思
2016/02/20 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
德生2P3收音机开箱评测
2022/04/30 无线电