文档章节

css 保持宽高比缩放

 阿豪boy
发布于 01/24 15:31
字数 397
阅读 148
收藏 0

参考

关于html:用CSS保持div的宽高比

 

需求简介:

在大的div中放九个小div, 小div需要保持4:3的宽高比, 小div中会有图片, 图片按照4:3拉伸

 

下图效果是div1:1 , 图片宽度100%, 高度自适应

思路

1, 使用padding-bottom / padding-top 计算值时使用父元素的宽度来生成宽高比固定的div, 但此时该div高度为0

描述
length 规定以具体单位计的固定的下内边距值,比如像素、厘米等。默认值是 0px。
% 定义基于父元素宽度的百分比下内边距。此值不会如预期地那样工作于所有的浏览器中。
inherit

规定应该从父元素继承下内边距。

2, 使用绝对定位拉伸子元素宽高

3, 对于图片进行拉伸

 

<template>
  <div class="box-wrap">
    <div v-for="i in 9" class="box">
      <div class="img-wrap">
        <img src="./img.jpg" alt="" class="img">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "app"
  }
</script>

<style scoped>
  .box-wrap {
    border: 1px solid black;
    margin: auto;
    display: flex;
    height: 60vh;
    width: 40vw;
    flex-wrap: wrap;
    padding: 2px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
  }

  .box {
    width: 30%;
    height: 0;
    padding-bottom: 30%;
    box-sizing: border-box;
    margin: 2px;
    background: gray;
    position: relative;
  }

  .img-wrap{
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .img {
    width: 100%;
    margin: auto;
  }

</style>

 

© 著作权归作者所有

粉丝 25
博文 1651
码字总数 1135041
作品 0
西安
私信 提问
加载中

评论(0)

如何将一张图片完整显示在容器里?

如题,当图片尺寸小于容器时,直接按图片原尺寸显示就好了,但是当图片尺寸大于容器时,就要设法缩放图片以完全装入容器,图片要尽可能的匹配容器尺寸,并保持宽高比例(图片不能拉伸或挤压变...

wingmeng
2019/08/12
0
0
图片在固定宽高盒子中的显示问题

我们经常可能会遇到这样一个情况: 在一个固定宽高的盒子中,要放置一张宽高比不定的图片(比如说后台上传的图片),这时候图片应该如何设置样式呢? 有人可能会说,那还不简单,图片宽高设置...

璿而不华
2017/11/14
0
0
H5中的2D转换和过渡

Html5中的2D转换和过渡 (1)2D转换 概念:就是元素在2D平面上实现移动,旋转,缩放,斜切的操作就称之为2D转换 语法:transform:值 值:移动,旋转,缩放,斜切 (1.1)移动 transform:t...

范泽鹏
2016/11/09
103
0
LibGDX_4.6: 多分辨率屏幕适配: 视口(Viewport)

本文链接: http://blog.csdn.net/xietansheng/article/details/50187331 LibGDX 基础教程(总目录) 1. 概述 手机屏幕多种多样,有着分辨率不同,屏幕宽高比也可能不同。同一张图片在不同手机...

xietansheng
2015/12/07
0
0
两个viewport的故事-桌面版(译)

王亚辉 | 发表于 2017-03-29 网易乐得技术团队 在这个系列文章中,我将说明viewports和重要元素的宽度是如何工作的,比如html元素、window和 scrren的宽度。这篇文章是关于桌面浏览器的,目的...

学霸猫
2018/08/30
11
0

没有更多内容

加载失败,请刷新页面

加载更多

上海哪里有开咨询费发票-上海新闻网

上海哪里有开咨询费发票【電徴同步;135 * 64 99 * 81 96】陈生,诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug B...

票微fp2090
7分钟前
15
0
绍兴哪里有开发票

绍兴哪里有开发票【電徴同步;132 * 29 30 * O5 68】李生,诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug Bridge,...

程序大1
40分钟前
33
0
盐城哪里有开发票

盐城哪里有开发票【電徴同步;132 * 29 30 * O5 68】李生,诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug Bridge,...

8741752
43分钟前
29
0
苏州哪里有开发票

苏州哪里有开发票【電徴同步;132 * 29 30 * O5 68】李生,诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug Bridge,...

2468643
45分钟前
35
0
廊坊哪里有开发票

廊坊哪里有开发票【電徴同步;132 * 29 30 * O5 68】李生,诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug Bridge,...

68735
51分钟前
23
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部