一张图超过了屏幕大小如何自动将多出部分隐藏只显示中间部分

转载于 2017-11-10 17:38:00 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zxhh/p/7815729.html

文章标签：

#游戏

本文介绍了两种使用CSS实现背景图片自适应的方法：一是通过设置背景图片为居中并对div元素进行溢出隐藏来实现不同分辨率下的图片裁剪效果；二是通过调整背景图片的尺寸属性实现图片拉伸自适应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.让图片处理居中的位置，当分辨率变化后就会自动裁减两边的。

最好用背景图片，eg:

<div class="boundary">

    <div class="by_main">

    </div>

</div>

.boundary {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
}
.by_main{
    background: url("../images/top.jpg") center center no-repeat;
    height: 768px;
} 


2.当背景是一整张图片，内容太多，出现滚动条又想让图片自动拉伸，自适应
<div class="frame"> </div>

.frame{
    background: url("../images/bg.jpg") center no-repeat;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment:fixed;
    min-height: 100%;
}

转载于:https://www.cnblogs.com/zxhh/p/7815729.html