html 图片正方形,关于CSS:如何使图像显示为正方形?
我最近一直在使用bootstrap 4 alpha版本来创建项目,经过大量尝试,当显示它们时,我无法使上传的不同大小的图像显示为正方形。
还记得Instagram如何仅显示方形图像作为缩略图吗?我想实现这一目标。我进行了一些研究,并尝试了其他人写下的一堆东西,但是唯一可以做到这一点的是:
https://stackoverflow.com/a/23518465/1067213
但是结果不是我真正想要的:
如您所见,图像不是正方形的,并且第一个图像下方有一个间隙,以便与其他两列对齐(我希望所有列的宽度和高度都相同)。
我使用Django创建图像文件的URL。
这是我的html:
{% if competition_list %}
{% for competition in competition_list %}
{{competition.name}}
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
View details ?
{% endfor %}
{% else %}
No competitions in this category, please try an other category
{% endif %}
这是我的CSS:
.card {
margin-bottom: 10px;
}
.image{
position:relative;
overflow:hidden;
padding-bottom:100%;
}
.image img{
position:absolute;
}
理想的结果如下所示:
让我知道您是否需要更多信息。
提前致谢!
这确实与Django或Bootstrap无关。 您需要将图像设置为.image上的背景,以便可以将其裁剪为正方形。
还要确保已应用CSS来用背景图像填充元素:
.card .image {
background-size: cover;
}
您也可以尝试强制图像拉伸到.image高度的100%,并隐藏水平溢出,但是背景方法更简单。
仅添加您在此处提供的CSS不会显示任何内容。 但有了CSS,我已经可以正常使用了。 我确实有一个问题。 这种作物到中心了吗?
要使图像居中,请使用以下命令:background-position: center center;
非常感谢你! 这很简单,很直接!
您可以使用包装器来播放width,max-width和min-height:
您将宽度设置为100%,它将缩放高度。
.image-wrapper {
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
background: rgba(0, 0, 0, 0.5);
margin: 10px 0;
}
.image-wrapper img {
width: 100%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
添加,顶部,左侧和变换,以便图像垂直居中。
您也可以使用background-size:覆盖并以background-position播放。
// CSS
.use-cover-background {
background-size: cover;
background-position: center;
}
.square {
margin: 10px 0;
width: 300px;
height: 300px;
}
看到他们正常工作:https://jsfiddle.net/mcgnyfw9/
问候,
html 图片正方形,关于CSS:如何使图像显示为正方形?相关推荐
- html怎么使背景图片充屏,css如何使div背景图片填充
2016-07-08 00:56车庆云 客户经理 css代码添加背景图片常用代码 1 背景颜色 {background-color:数值} 2 背景图片 {background-image: url( ...
- html如何设置图片自动居中,css如何使图片居中?
在我们的WEB前端css开发过程中,我们避免会遇到让图片居中的情况,为了网页美观以及用户的体验,我们有时候就要让图片居中,那么我们也都知道图片居中的方法有很多,今天我们就给大家详细介绍下CSS实现图片 ...
- [css] 怎么使图片宽度自适应呢?
[css] 怎么使图片宽度自适应呢? 百分比 vw padding:百分比 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端 ...
- css怎么使图片变暗些
css中,可利用filter属性和brightness()函数来让图片变暗,filter属性用于设置图片元素的可视效果,配合brightness()使用可调整图片的亮度,语法为"图片元素{f ...
- css滤镜使文字变3D效果
为什么80%的码农都做不了架构师?>>> 四夕刚从 OECP社区看到了一篇文章 <css滤镜使文字变3D效果>,Css的确很强大, W3C 公布了样式单( CSS ...
- html 图片右侧空白,CSS缩小窗口时,背景图出现右侧空白
CSS让背景平铺的代码 repeat-x ,也就是沿着X方向重复下去(横向平铺): repeat-y (纵向平铺){ background-p_w_picpath: url 关于宽度自适应,已经是前段 ...
- css图片横向压缩,【css样式生成 图片合并压缩工具】Sprite,你值得拥有
好久好久没有更新博客了,越来越懒...话说懒也有懒的好处,懒的时候你可能会想着用些神马方法来帮你偷懒.没错,下面就给大家介绍个博主前不久开发的[css样式生成 & 图片合并压缩工具]Spirt ...
- html如何把图片在背景图一半,img只显示图片一部分 或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
- css sprites精灵图、css图片整合、css贴图定位案例教程
一. 什么是css sprites CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图.就是将导航的背景图,按钮的背景图等有规则的合并成一 ...
最新文章
- 使用Google 官方的控件SwipeRefreshLayout实现下拉刷新功能
- Freemarker条件判断
- java使用gridview,网格控件GridView在Android中的使用
- nginx安装编译,动态添加模块及其各模块的作用
- 讲二次搜索树转化为排序的双向链表
- java的引用指的是什么_请问java里的引用是指什么啊?
- [Python] L1-005. 考试座位号-PAT团体程序设计天梯赛GPLT
- IT行业发展趋势及就业前景?
- java jersey使用总结_Java Jersey2使用总结
- 对List中的对象的模糊查询
- win10“我们找不到你的相机“,错误代码0xA00F4244<NoCamerasAttached>解决方法
- 【转】怎样评价寒武纪的芯片1P 1M和MLU100?能够叫板英伟达吗?
- 拜托,使用 Three.js 让二维图片具有 3D 效果超酷的
- 超详细的WMS仓储管理系统介绍——盘点篇
- 第一章踏上python之旅_神界之唯我逍遥
- Electron 麒麟 Linux 系统 root 账户报错
- Cordova在左,Capacitor在右
- English Learning - L2 第 9 次小组纠音 辅音 [s] [z] [ʃ] [ʒ] [h] [ʧ] [ʤ] 2023.3.25 周六
- 腾讯云微搭入选国际权威研究机构Forrester《2021年低代码平台中国市场现状分析报告》
- 2016年我所面试过的那些公司