通过CSS让图片在DIV中上下左右居中显示

编程之家收集整理的这篇文章主要介绍了通过CSS让图片在DIV中上下左右居中显示编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我们在做网站的时候经常会用到缩略图,比如产品列表,缩略图肯定是有一个长宽值或长宽比的,如果让图片宽度100%,高度一定值,超出高度的隐藏不显示,这样的话图片显示不完整,可能你的客户是不同意的。如果宽度和高度都用固定值,那么图片可能就会变形显示,这样效果更差。所有很多人会想,如果图片可以在外层DIV中自动缩放,并上下左右居中,这样就好了,其实这个效果实现起来也是非常简单的,其中有个前提是图片要放到背景中,而不是直接写到HTML里。然后给外层DIV一个固定宽高值(响应式布局可以高度值固定,宽度值用百分比),在给放图片背景的标签一个 background-size: contain,当然,背景图片也设置一下 center。不说了,直接上代码

<div class="imgBox" background: url(images/jjfa-1.jpg) no-repeat center;height: 216px;width:314px;border:1px solid #e5e5e5;background-size: contain;">

</div>当然你也可以把样式写到css文件中,但是这样写的话后期程序获取数据的时候会比较方便

总结

以上是编程之家为你收集整理的通过CSS让图片在DIV中上下左右居中显示全部内容。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给好友。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

wordpress相关文章

开发主题时使用了wordpress的缓存函数,如下所示代码,但是在打印缓存时,怎么显示的都是false,经过查找才了解到。默认情况下,对象缓存是非持久的。这意味着存储在缓存中的数据仅在请求期间驻留在内存中。除非您安装持久缓存插件,否则缓存数据不会在页面加载时持久存储。就这个意思,想持久就需要找个插件装上。function get_term_post($term_id){if($term_id &l
在 WordPress 主题和插件开发中,条件判断标签(Conditional Tags)是非常重要的,通过条件判断标签,我们可以判断各种情况,从而使用对应的代码等。例如在顶部导航条中有一个“首页”选项,在首页的时候需要设置成高亮,我们可以在头部导航模板文件(header.php)中使用条件判断标签 is_home() 来判断当前页面是不是首页,然后再输出高亮的 class。这类的条件判断标签一般
新版的 wordpress6.1 已经将小工具也改成古腾堡的吧,若是以后站长或者开发者还想使用wordpress那么必须向这方面靠拢啦,尽管你不情愿,不过一段时间内我们还是可以先禁用的,下面是禁用的方法。直接用代码禁用将下方代码放到function.php中,即可屏蔽掉小工具的区块模式add_action('after_setup_theme', function(){remove_theme_s
做 WordPress 开发时,需要通过后台设置的某个自定义分类法 ID 获取该分类的链接,传递 ID 的变量给 get_term_link()函数时,却无法获取该分类的链接。通过查找资料获悉是由于 get_term_link()函数和其它常用的 wordpress 函数不同,该函数不能自行转换变量类型,解决方法是先把字符类变量转换成整数变量才可以正常获取链接。$id = intval($getI
WordPress临时APIset_transient(), get_transient(), delete_transient()这个函数类似于用于存储检索选项数据库表单的get_options()以及update_options()函数。 他们的主要区别在于,你可以给这个临时API函数传递一个时间参数,作为数据库输入的过期日。当参数显示的时间到达之后,输入会被移除。如果你需要缓存数据或查询某个
WordPress能让你自定义URL结构。为您的链接提高美感、可用性和前向兼容性。 优化SEO ,提高收录,这是非常必要的一个环节
WordPress阅读设置 ,这是一个基本的设置详细描述 标签1 :设置网站首页是显显最新文章列表,还是一个静态页面
写文章时,所上传的媒体文件都会存储到媒体库。 而在媒体库里上传的媒体文件也是可以在写文章时,随时插到文章中的。