前端之图像

一只爱吃萝卜的小兔子

已于 2022-04-18 16:48:27 修改

阅读量637

点赞数

分类专栏：前端基础文章标签：前端 css css3

于 2022-03-08 15:22:37 首次发布

本文链接：https://blog.csdn.net/weixin_46372074/article/details/123351409

版权

前端基础专栏收录该内容

53 篇文章 4 订阅

订阅专栏

本文介绍了前端开发中如何处理图像溢出，通过设置`max-width`和使用`object-fit`属性实现不同效果。`max-width: 100%`防止图片超出容器，`object-fit`提供了fill、cover、contain、none和scale-down等多种填充方式，以适应不同的布局需求。同时，推荐使用.svg格式的图标以获得更好的显示效果。

摘要由CSDN通过智能技术生成

万物皆盒

页面小图标

个人建议用.svg格式

    <!--可以在收藏夹中显示出图标-->
    <link rel="Bookmark" type="image/x-icon" href="../favicon.svg"/>

    <!--可以在地址栏中显示出图标-->
    <link rel="icon" type="image/x-icon" href="../favicon.svg"/>
    <link rel="shortcut icon" href="../favicon.svg">

替换元素

替换元素：图像和视频，具有宽高比。css不能改变它们的内部布局，只能改变它们位置。

调整图像大小

如何处理图片的溢出呢？

max-width

<style>
.container1 .box {
    width: 200px;
    border: 2px solid rebeccapurple;
}

.max {
    max-width: 100%;
}
</style>

<body>
    <div class="container1">
        <h2>图片溢出</h2>
        <h3>max-width:100%;</h3>
        <div class="box">
            <img src="./images/big-bg.jpg" class="max" alt="庄周——高山流水">
        </div>
    </div>
</body>

在这里插入图片描述

object-fit

使用object-fit时，替换元素（视频，图）可以以多种方式被调整到合乎盒子的大小。

使用object-fit时，一定要有img元素的尺寸百分百。否则object-fit不生效。

<style>
img {
    width: 100%;
    height: 100%;
}
</style>

在这里插入图片描述

<style>
.container1 .box {
    width: 200px;
    height: 200px;
    border: 2px solid rebeccapurple;
}

img {
    width: 100%;
    height: 100%;
}

.max {
    max-width: 100%;
}

.fill {
    object-fit: fill;
}

.cover {
    object-fit: cover;
}

.contain {
    object-fit: contain;
}

.none {
    object-fit: none;
}

.scale-down {
    object-fit: scale-down;
}
</style>

        <h2>object-fit</h2>
        <h3>fill 拉伸填充</h3>
        <div class="box">
            <img src="./images/big-bg.jpg" class="fill" alt="庄周——高山流水">
        </div>

        <h3>cover 保持比例填充</h3>
        <div class="box">
            <img src="./images/big-bg.jpg" class="cover" alt="庄周——高山流水">
        </div>

        <h3>contain 保持比列，缩放</h3>
        <div class="box">
            <img src="./images/big-bg.jpg" class="contain" alt="庄周——高山流水">
        </div>

        <h3>none 尺寸不变</h3>
        <div class="box">
            <img src="./images/big-bg.jpg" class="none" alt="庄周——高山流水">
        </div>

        <h3>scale-down</h3>
        <div class="box">
            <img src="./images/big-bg.jpg" class="scale-down" alt="庄周——高山流水">
        </div>