html css3不拉伸图片显示效果

本文主要介绍了html css3不拉伸图片显示效果,类似淘宝,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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
}


 

最终效果如上图的左边。

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;
}

 

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

到此这篇关于html css3不拉伸图片显示效果的文章就介绍到这了,更多相关html css3不拉伸图片 内容请搜索编程学习网以前的文章,希望大家以后多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

在layui中我们可能会有需要在执行完某一操作后使操作框变得不可选或者显示其他内容来进一步操作。例如: 这时我们就需要利用到layui中的一些语法: script type="text/html" id="对应操作栏的id"{{# if(条件){ }} a class="layui-btn layui-btn-xs layui-btn-warm" lay-
调整layui的弹出框msg的字体大小以及其他样式: //文本里面可以加html标签let sure = layer.msg('span style="font-size:20px"确定喜欢她吗?/span', { time: 0 //0表示不自动关闭 ,time自动关闭所需毫秒 ,单位是毫秒(1秒=1000毫秒) , btn: ['span style="font-size:20px"确定/s
使用JavaScript实现随机颜色生成器 目录 项目基本结构 1.颜色生成器的基本结构 2.使用 HTML 添加标题 3.创建用于颜色查看的显示器 4.创建一个框以查看颜色代码 5.创建生成器和复制按钮 6.使用 JavaScript 激活随机颜色生成器 完整源码下载 在线演示地
javascript实现登录框拖拽 本文实例为大家分享了javascript实现登录框拖拽的具体代码,供大家参考,具体内容如下 效果: 代码: !DOCTYPE html html head lang=en     meta charset=UTF-8     title/title     style         .login-header {             ...
JavaScript制作简单网页计算器 本文实例为大家分享了JavaScript制作简单网页计算器的具体代码,供大家参考,具体内容如下 一.题目 利用JavaScript中的函数,完成数字加.减.乘.除的运算,实现一个简单的计算器. 二.代码 !doctype html html head meta charset=utf-8 ti