在不同的分辨率下图片自动隐藏两边的部分, 只显示中间部分

最新推荐文章于 2022-09-29 15:37:49 发布

菜同学

最新推荐文章于 2022-09-29 15:37:49 发布

阅读量442

点赞数 1

分类专栏： CSS 文章标签： css 不同分辨率图片居中

本文链接：https://blog.csdn.net/qq_41530816/article/details/101770602

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.使用定位

<!DOCTYPE html>
<html lang="en">
<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>在不同的分辨率下图片自动隐藏两边的部分, 显示中间的内容</title>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }
        .container {
            position: relative;
            height: 900px;
            overflow: hidden;
        }
        .content {
            position: absolute;
            width: 1920px;
            left: 50%;
            margin-left: -960px;
            height: 100%;
        }
        img {
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <img src="./images/kiosk.jpg" alt="努力加载中">
        </div>
    </div>
</body>
</html>

2.使用背景图

<!DOCTYPE html>
<html lang="en">
<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>在不同的分辨率下图片自动隐藏两边的部分, 显示中间的内容</title>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }
        .backPic {
            background: url('./images/kiosk.jpg') no-repeat center center;
            background-size: cover;
            height: 690px;
        }
    </style>
</head>
<body>
    <div class="backPic"></div>
</body>
</html>

菜同学

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在不同的分辨率下图片自动隐藏两边的部分, 只显示中间部分

1.使用定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
复制链接

扫一扫