截图图片两边使图片在盒子里居中的三种方法

GHOST_349178 发布于2019-08-29 12:53 / 2436人阅读

摘要：部分如下我用的是绝对定位我用的是我用的是左右大比例负以上就是截取隐藏图片两侧让图片在盒子居中的种方法了，希望能能对大家有用。

最近项目改版，需要在一个正方形的盒子区域中显示图片，由于旧数据中都是横向长方形的图片，旧数据又不能舍弃，产品就要求对于这种图片进行两边截取，在正方形盒子中只显示图片中间部分的（蛋）要（疼）求。

经过一番尝试一共找到3种可以成功实现的方法，在此分享一下。

原图如下
结果如下

1.使用绝对定位+transform

这个方法已经被广泛用来使指定元素在盒子中上下左右居中了，同样也适合上述场景

2.使用display:flex属性。

不得不说flex非常强大，设置了display:flex以后，可以通过简单设置justify-content以及align-items来规定内部元素的呈现方式而不用做任何的计算。

3.大比例负margin

不得不说最后一种方法略微诡异，一般margin:0 -100%;即可，但在实际使用过程用发现有时会失效，怀疑和图片、盒子还有屏幕宽度之间的比例有关系，所以设成了-300%，设成-300%以后目前一切正常。

html部分如下

我用的是绝对定位+transform

    

我用的是flex

    

我用的是左右大比例负margin

以上就是截取（隐藏）图片两侧让图片在盒子居中的3种方法了，希望能能对大家有用。

GPU云服务器云服务器 js使图片变清晰了 html5使图片居中云计算的三种服务模式 asp支持的三种控件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112214.html

截图图片两边使图片在盒子里居中的三种方法

摘要：部分如下我用的是绝对定位我用的是我用的是左右大比例负以上就是截取隐藏图片两侧让图片在盒子居中的种方法了，希望能能对大家有用。最近项目改版，需要在一个正方形的盒子区域中显示图片，由于旧数据中都是横向长方形的图片，旧数据又不能舍弃，产品就要求对于这种图片进行两边截取，在正方形盒子中只显示图片中间部分的（蛋）要（疼）求。经过一番尝试一共找到3种可以成功实现的方法，在此分享一下。原图如下...

import. 2019-08-01 17:07 评论0 收藏0
CSS 布局经典问题初步整理

摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理标签：前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

Amos 2019-08-29 12:36 评论0 收藏0
web前端（11）—— 页面布局1

摘要：维护起来更加方便不足雪碧的最大问题是内存使用拼图维护比较麻烦使的编写变得困难雪碧调用的图片不能被打印我们可以使用综合属性制作通天，什么是通天呢，就是一般我们电脑的屏幕都是但是设计师给我们的图都会比这个大，那么我们可以此属性来制作通天。要说页面布局的话，那就必须说说margin，padding，和background。这三个属性其实都是前面讲过的，这里还是再次讲解以下，为什么呢？因为是这样的...

番茄西红柿 2019-04-23 13:11 评论0 收藏0
CSS 布局方式

摘要：中间左栏右栏清除浮动如下图缺点结构不正确多了一层标签布局左栏中间右栏如下图缺点兼容性问题参考文章 W3C标准由万维网联盟制定的一系列标准，包括：结构化标准语言（HTML和XML）表现标准语言（CSS）行为标准语言（DOM和ECMAScript） CSS中的定位机制在CSS中存在三种定位机制：标准文档流（Normal flow）浮动（Floats）绝对定位（Abs...

LancerComet 2019-08-29 15:27 评论0 收藏0
CSS 设计指南学习笔记二

摘要：原文地址本篇文章是笔者的设计指南学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对设计指南进行一些总结，没有看之前第一部分的话也可以从这里传送过去。原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是笔者的《CSS 设计指南》学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对 ...

printempw 2019-08-30 12:47 评论0 收藏0