css:设置图片为正方形-阿里云开发者社区

开发者社区> 开发者小助手-bz> 正文

css:设置图片为正方形

简介: css:设置图片为正方形
+关注继续查看
<div class="wrap">
  <div class="div">
    <img src="a.jpg">
  </div>
</div>

<style>
  .wrap{
    width:50%;
  }
  .div{
    width:100%;
    height:0;
    padding-bottom:100%;
    position:relative;
  }
  .div img{
    width:100%;
    height:100%;
    position:absolute;
    border: 1px solid red;
  }
</style>

参考

119.css如何使图片固定为正方形

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10022 0
css垂直居中怎么设置?文字上下居中和图片垂直居中
  css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题。垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下。   css文字上下居中:一、单行内容的居中。
1152 0
【POI】使用POI处理xlsx的cell中的超链接 和 插入图片 和 设置打印区域
使用POI对xlsx中插入超链接和 插入图片   1 package com.it.poiTest; 2 3 import java.awt.image.BufferedImage; 4 import java.
2757 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13833 0
用CSS设置的border属性及标签不显示下划线
1.在CSS样式表中并不能直接对表格元素的border元素进行设定,那么要想实现像Excel表格样式的表格怎么办呢?只能对表格和单元格分别加边框来实现,具体的是:对表格显示上边框和左边框,而让每个单元格显示下边框和右边框,这样一组合起来就达到了中的border一样的效果,具体的代码如下: TABLE.
855 0
Markdown设置图片格式模板
Markdown设置图片格式模板
5 0
css 设置背景图片铺满固定不动
#page{     position: relative;     width: 100%;   height: 100%;   background-image:url(.
1089 0
1569
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载