放入div中的图片不变形的解决方法

最新推荐文章于 2024-07-25 10:18:55 发布

hh湫丶

最新推荐文章于 2024-07-25 10:18:55 发布

阅读量2.1k

点赞数

文章标签： div css 图片不变形

本文链接：https://blog.csdn.net/lovezhuer1/article/details/103474515

版权

前言

在DIV CSS布局中对于图片排版时，如果使用CSS固定死图片大小（宽度高度），如果图片相对于这个位置不是等比例大小，那么这张图片就会变形。以下是解决图片变形的方法。

方法

第一种

让图片和布局宽度高度成等比例，这样CSS设置死宽度和高度，图片也是等比例缩小，图片也不会变形。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .imgcss{
            width:400px;
            height: 400px;
            border:1px solid red;
        }
        .imgcss img{
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="imgcss">
        <img src="./image/timg.jpg">
    </div>
</body>

图片原本的宽高都是800px,等比例缩小成400px后，图片不变形。如下图：
在这里插入图片描述

第二种

使用max-width:300px或max-height:100px，即可解决图片比例缩小。但这样存在一个问题，如果按照宽度缩放，但图片过高会超出溢出盒子，这个时候需要对父级使用overflow:hidden隐藏超出图片内容。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .imgcss{
            width:300px;
            height: 200px;
            overflow: hidden;
            border:1px solid red;
        }
        .imgcss img{
            max-width: 300px;
        }
    </style>
</head>
<body>
    <div class="imgcss">
        <img src="./image/timg.jpg">
    </div>
</body>

上方代码是以按照宽度缩放为例，图片高度超出部分被隐藏，但图片不会变形。效果如下：
在这里插入图片描述

hh湫丶

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
放入div中的图片不变形的解决方法

前言在DIV CSS布局中对于图片列表或图片排版时，图片不是固定宽度高度大小，但图片占位是固定宽度高度，这个时候如果使用CSS固定死图片大小（宽度高度），这个时候如果图片相对于这个位置不是等比例大小，那么这张图片就会变形，让图片变的不清晰，这个时候想让图片不变形又按比例缩放，如何解决？CSS图片缩小不变形，图片自动缩小，图片按比例等比例缩小不变形解决。http://www.divcss5.c...
复制链接

扫一扫