在Boostrap中使用img-circle保持完美的圆
布莱恩克斯
好的，这似乎是有很多潜在解决方案的问题，但没有一个对我想做的有用。我始终希望显示完美的圆圈，即使基础图像不是完美的圆圈也是如此。但是，我不想通过px指定图像尺寸，因为我希望它具有响应性。看来，无论我尝试哪种解决方案，圆圈总是会扭曲成椭圆形，或者图片尺寸完全被接管并变得巨大。
HTML：
<div class='item-image'>
<img class='img-circle img-responsive img-center' src='#' />
</div>
目标：
无论图像大小（矩形）如何，我都希望红色圆圈下面的图像部分能够显示出来。
太阳
最好的方法是每个叠加层。并用CSS做个圈！
<div class="wrapper">
<img src="#" class="img-responsive">
<div class="circle"></div>
</div>
.wrapper有position: relative和.circle有position: absolute和border-radius: 100%。
包装器必须使用定位inline-block。用居中包装text-align: center。
将绝对定位的元素居中，如下所示：
.el {
position: absolute;
top: 50%;
margin-top: -(height / 2)%;
left: 50%;
margin-left: -(width / 2)%;
}
如果要将图像放在圆内，请增大圆。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
计算不完美的圆
- 2
使用CSS制作完美的圆形div
- 3
使用 heroku 部署完美的 swift
- 4
在屏幕上绘制后，圆弧或圆不是完美的圆
- 5
强制图像标签成为完美的圆
- 6
如何使用数据库实现完美的队列
- 7
如何使用HTML Canvas创建像素完美的裁剪区域？
- 8
如何使用OpenCV修复不完美的形状
- 9
使用底部栏和片段进行完美的导航
- 10
如何使用opencv在python中绘制完美的线条
- 11
在 R 中使用 foreach 启动时，完美的循环无限期地运行
- 12
在可变高度元素上保持完美的圆角
- 13
Boostrap / CSS始终保持内容在页面上完美居中
- 14
如何使用CSS在圆中完美地使“加号”居中
- 15
是否有完美的解决方案可以在 ubuntu 16.04 中使用 Qt 5.7 显示 swf 文件？
- 16
边界半径：50％产生锯齿状圆；为什么不完美的圈子？
- 17
是否可以从零件中获得完美的svg圆？
- 18
XAML按钮，带有圆边，侧面有完美的半圆
- 19
将xmllint和xpath与不太完美的HTML文档一起使用？
- 20
如何使用iOS 7获得完美的iPhone电池电量百分比
- 21
如何为抛出异常的负数编写完美的代码？使用assertThatThrownBy
- 22
完美的滚动条在使用 insertAdjacentHTML 动态加载内容时不起作用
- 23
完美的转发技巧
- 24
Python Turtle：使用circle（）方法绘制同心圆
- 25
不完美的弧线绘制
- 26
完美的转发困境
- 27
圈不是完美的PIL
- 28
完美的转发困境
- 29
线性分区，完美的图库
我来说两句