图片等比例缩小

最新推荐文章于 2024-05-24 10:15:12 发布

阿狐狸

最新推荐文章于 2024-05-24 10:15:12 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签：图片等比例缩小

本文链接：https://blog.csdn.net/feiniaoxinglanzi/article/details/82186205

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

目前项目中有个需求是将同一张图片显示在不同的页面上，但是因为页面给予的容器大小不一，这就需要将图片等比例缩小。最近学到了两个个能将图片等比例缩小的属性，个人感觉用起来非常方便。如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img缩放</title>
    <style>
        .yuan {
            width: 100%;
            height: 100%;
            border: 1px solid red;
        }

        .suo > img {
            border: 1px solid gray;
            width: auto;
            height: auto;
            max-width: 10%;
            max-height: 10%;
        }
    </style>
</head>
<body>
<div class="yuan">
    <img src="./../images/404.jpg">
</div>
<div class="suo">
    <img src="./../images/404.jpg">
</div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿狐狸

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片等比例缩小

目前项目中有个需求是将同一张图片显示在不同的页面上，但是因为页面给予的容器大小不一，这就需要将图片等比例缩小。最近学到了两个个能将图片等比例缩小的属性，个人感觉用起来非常方便。如下： &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt;...
复制链接

扫一扫