padding-bottom控制图片为正方形

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="rubine">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
    .img-wrap{
        width: 60%; /* 这里设置占屏幕宽度百分比 */
        margin: 0 auto;
    }
    
    /* 创建一个正方形容器 */
    .img-container{
        width: 100%;
        height: 0px;
        padding-bottom: 100%;
        overflow:hidden;
        margin: 0;
        position:relative;
    }

/* 采用绝对定位 */
    .img-wrap img{
        position:absolute;
        width: 100%;
        height: 100%;
    }
  </style>
 </head>
 <body>
    <div style="width: 100px;">
        <div class=‘img-wrap‘>
            <div class="img-container" >
            </div>
        </div>
        
    </div>
 </body>
</html>

时间： 2024-08-30 12:41:25

padding-bottom控制图片为正方形的相关文章

用CSS控制图片大小显示的方法

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定),来保持图片不变形走样的完全显示. 对于标准浏览器(如Chrome/Firefox),或者IE7/8浏览器,直接使用max-width,max-height:或者min-width,min-height的CSS属性即可.如: 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高

基于jQuery可悬停控制图片轮播代码

基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id="banner_tabs" class="flexslider"> <ul class="slides"> <li> <a title="" target="_blank"

插一张图片,用SeekBar来控制图片的透明度

1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:tools="http://schemas.android.com/tools" 4 android:layout_width="match_parent

js鼠标控制图片的特效，滚轮控制放大、缩小、鼠标拖动、聚焦。。。

项目需要做一个js控制图片的特效,滚轮控制放大.缩小.鼠标拖动等效果,网上找方法,各种报错.不兼容...最终自己研究出一套方案如下: 代码直接从项目中拷了,就不整理格式了 <script type="text/javascript"> //图片特效 by jifei_mei //图片大小,记录放大或缩小图片前的大小 var pic_size = { width:0, height:0 }; //绑定滚轮滚动事件 if (window.addEventListener) {

控制图片在latex中的位置

如何做到自己控制图片在latex中的位置? 方法:在 \begin{figure} 后面加参数 [h!] 即 \begin{figure}[h!] % Requires \usepackage{graphicx} \includegraphics[width=]{}\\ \caption{} \label{} \end{figure}

js控制图片自动缩放，实现铺满盒子，不变形，完全局中

此js一般用于控制图片铺满盒子,但是比例不变,并且绝对局中原理:判断图片的高宽与盒子高宽的大小的关系,然后通过比例来控制图片的缩放及定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

jquery版相片墙（鼠标控制图片聚合和散开）

原文:jquery版相片墙(鼠标控制图片聚合和散开) 照片墙,简单点说就是鼠标点击小图片时,聚合变成一张大图片:点击大图片时,散开变成小图片.这个是我一年前无意间看到的动画效果(现在已经忘记是哪位大神制作的了,引用了他的图片),刚看到这个很炫的动画超级激动,哇!怎么可以这么牛!我制作出来的没那边炫,但是还是制作出来了,算是对我的一种激励!希望能有碰到问题就要解决它的精神,即使不是现在但会是不久的将来! 一.演示效果 散开状态: 聚合状态: 二.html代码 <div class="box&

Android进度条控制图片旋转&#183;平移&#183;缩放&#183;倾斜

初来乍到 平时代码多写于某笔记软件上 现在在这里记录一些 从初学Android开始写起 可能有些地方实现得略小白 或者还不能熟练使用博客园的功能 但是希望能够对需要的人有帮助 不足之处请多指教 一般使用工具:android studio 那么 Here we go. have a good time. 用进度条实现控制图片旋转·平移·缩放·倾斜 效果: 1 public class MainActivity extends AppCompatActivity implements SeekBar

CSS控制图片和文字在同一行显示且对齐的3种方法

CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法有3种:1.通过添加css的“vertical-align:middle;”:2.如果图片是背景图片,可以在css中设置背景图片:3.把文字和图片分别放入不同的div中.上面三种方法都可以让图片和文字在同一行显示,下面我们用实例来应用一下. 1.添加上“vertical-align:middle”属