您现在的位置是：网站首页> 编程资料编程资料

html css3不拉伸图片显示效果Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码CSS实现HTML背景图片拉伸铺满示例

2023-10-08 388人已围观

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

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

html:

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:

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不拉伸图片内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：HTML+CSS 实现顶部导航栏菜单制作CSS 带搜索导航栏的示例代码html+css+js实现导航栏滚动渐变效果html+css 实现简易导航栏功能纯CSS实现导航栏下划线跟随的示例代码CSS+HTML 实现顶部导航栏功能

下一篇：关于html选择框创建占位符的问题HTML页面自适应宽度的table(表格)HTML5 body设置自适应全屏html5移动端自适应布局的实现HTML5 textarea高度自适应的两种方案

您现在的位置是：网站首页> 编程资料编程资料

html css3不拉伸图片显示效果Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码CSS实现HTML背景图片拉伸铺满示例

相关内容

点击排行

本栏推荐

猜你喜欢