如何在正方形中心调整svg,并具有动态调整到屏幕的能力

走了

我正在寻找一种方法来将SVG图标放置在square div的中心,并根据动态变化的c列的长度(宽度)和高度进行调整。我想在这里实现外观上的类似目标

由于宽度和高度动态变化,因此line-height不适合本示例。我正在寻找一种方法来将它在div的中心垂直和水平居中,而不需要线高。

可以包含flex没关系。

我想将每个正方形的宽度增加15%,但是高度没有调整的问题。

帕特里克·弗洛勒(PatrikFröhler)

不知道Iunderstanding是否正确,但也许是这样,如果您不希望它在重新缩放时“快速下移”,则可以删除最小宽度和最小高度。

HTML:

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS:

body{
    width: 100%;
    height: 100%;   
    margin 0;
    padding 0;
}

#wrapper{
    width: 100vw;
    height: 100vh;
    background-color: #ccc;
}

.box {
    width:20%;
    height:20vw;
    min-width:100px;
    min-height: 100px;
    max-width: 200px;
    max-height: 200px;
    margin:1%;
    background:DodgerBlue ;
    float:left;
    background-image: url("http://www.youtube.com/yt/brand/media/image/YouTube-icon-dark.png");
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center center;
}

演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在屏幕中心放置一个正方形(使用XAML)

来自分类Dev

如何在屏幕上打印正方形?

来自分类Dev

iOS 8自动版式-动态调整4个正方形视图的大小

来自分类Dev

如何在单张地图上添加具有悬浮效果的正方形图块?

来自分类Dev

如何编写一个始终位于屏幕中心并触及较短边缘的正方形?

来自分类Dev

在Matlab中调整图像大小(绘制正方形/比例)

来自分类Dev

如何将滑块调整到屏幕高度?

来自分类Dev

如何使用OpenGL在中心的按钮上绘制正方形?

来自分类Dev

C ++ OpenGL-如何在屏幕上移动2D正方形?

来自分类Dev

当内容无法容纳时,如何创建默认形状为正方形,高度可自动调整的TextView?

来自分类Dev

如何在 react-native 中默认使按钮或输入字段等任何组件调整到任何屏幕

来自分类Dev

如何使用SWT应用程序绘制具有不同颜色的正方形像素

来自分类Dev

mxn矩阵中心的索引。如果中心不存在,则返回最接近具有最高整数的中心的正方形的索引

来自分类Dev

OpenCV检测具有困难背景的正方形

来自分类Dev

创建具有可变正方形大小的棋盘

来自分类Dev

将圆以正方形为中心

来自分类Dev

在正方形阵列中寻找中心

来自分类Dev

如何在不使用SVG图像的情况下使用带有内部文本的React创建圆形/正方形形状?

来自分类Dev

如何在圆形网格内找到特定大小的所有正方形

来自分类Dev

ImageMagick:调整图像大小(矩形到正方形);保持主要物体的纵横比

来自分类Dev

使用ImageMagick合并正方形中的多个图像并调整其大小

来自分类Dev

将图像调整为正方形,但保持宽高比C ++ OpenCV

来自分类Dev

围绕可调整大小的视图的8个白色正方形的名称是什么?

来自分类Dev

如何在flex容器中具有100个“响应式” div正方形(每行10个),同时将其限制在其包装器中?

来自分类Dev

如何在flex容器中具有100个“响应式” div正方形(每行10个),同时将其限制在其包装器中?

来自分类Dev

获取正方形以在屏幕上移动

来自分类Dev

如何在Android Studio中将正方形居中

来自分类Dev

如何在Java中旋转非正方形图像?

来自分类Dev

如何在CSS中制作半正方形背景

Related 相关文章

  1. 1

    如何在屏幕中心放置一个正方形(使用XAML)

  2. 2

    如何在屏幕上打印正方形?

  3. 3

    iOS 8自动版式-动态调整4个正方形视图的大小

  4. 4

    如何在单张地图上添加具有悬浮效果的正方形图块?

  5. 5

    如何编写一个始终位于屏幕中心并触及较短边缘的正方形?

  6. 6

    在Matlab中调整图像大小(绘制正方形/比例)

  7. 7

    如何将滑块调整到屏幕高度?

  8. 8

    如何使用OpenGL在中心的按钮上绘制正方形?

  9. 9

    C ++ OpenGL-如何在屏幕上移动2D正方形?

  10. 10

    当内容无法容纳时,如何创建默认形状为正方形,高度可自动调整的TextView?

  11. 11

    如何在 react-native 中默认使按钮或输入字段等任何组件调整到任何屏幕

  12. 12

    如何使用SWT应用程序绘制具有不同颜色的正方形像素

  13. 13

    mxn矩阵中心的索引。如果中心不存在,则返回最接近具有最高整数的中心的正方形的索引

  14. 14

    OpenCV检测具有困难背景的正方形

  15. 15

    创建具有可变正方形大小的棋盘

  16. 16

    将圆以正方形为中心

  17. 17

    在正方形阵列中寻找中心

  18. 18

    如何在不使用SVG图像的情况下使用带有内部文本的React创建圆形/正方形形状?

  19. 19

    如何在圆形网格内找到特定大小的所有正方形

  20. 20

    ImageMagick:调整图像大小(矩形到正方形);保持主要物体的纵横比

  21. 21

    使用ImageMagick合并正方形中的多个图像并调整其大小

  22. 22

    将图像调整为正方形,但保持宽高比C ++ OpenCV

  23. 23

    围绕可调整大小的视图的8个白色正方形的名称是什么?

  24. 24

    如何在flex容器中具有100个“响应式” div正方形(每行10个),同时将其限制在其包装器中?

  25. 25

    如何在flex容器中具有100个“响应式” div正方形(每行10个),同时将其限制在其包装器中?

  26. 26

    获取正方形以在屏幕上移动

  27. 27

    如何在Android Studio中将正方形居中

  28. 28

    如何在Java中旋转非正方形图像?

  29. 29

    如何在CSS中制作半正方形背景

热门标签

归档