当前位置： 文江博客话题详情

背景图像缩放同时保持纵横比

发布于 2024-10-31 05:32:44 字数 228 浏览 3 评论 0原文

我希望背景图像能够像幻灯片放映一样自动变化。但我希望图像填充背景，无论浏览器窗口的大小如何......并且如果缩小，图像的长宽比不会改变。

这是我正在尝试执行的操作的示例：

http://www.thesixtyone.com/

如何我能完成这些任务吗？任何帮助将不胜感激。

原文

I would like to have images for my background that change automatically like a slide show. But I would like the images to fill the background no matter what size the browser window is...and if it is scaled down, the aspect ratio of the image does not change.

Here is an example of what I'm trying to do:

http://www.thesixtyone.com/

How can I accomplish these tasks? Any help will be much appreciated.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

岁吢 2024-11-07 05:32:45

你不能，至少不能像你现在尝试的那样。

但是，您可以做的是创建一个 ，并使用 css 设置 position:absolute，将其缩放到 100% 宽度并从父级裁剪它以 overflow:hidden

为例：http://jsfiddle.net/GHmz7/4/< /a>

You can't, at least not like you are trying to now.

What you can do, however, is create an <img> instead, and with css set position:absolute, scale it to 100% width and crop it from the parent with overflow:hidden

example: http://jsfiddle.net/GHmz7/4/

回复 原文
§对你不离不弃 2024-11-07 05:32:45

您可以尝试 jquery/js 更改背景图像：

<!doctype html>
<html>
    <head>
        <title>Width resolution</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body {
                font-size: 20px;
                font-family: arial,helvetica,sans-serif;
                font-weight: 700;
                color:#eee;
                text-shadow: 0px 0px 1px #999;
}
            div {
                width:auto;
                height:340px;
                border:#ccc groove 2px;
                padding:5px;
            }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('body').css({'background-color':'#ccc'});

                var sw = screen.width;

            function wres() {
                switch(sw) {
                    case 1920:
                        $('div').css({'background':'#192000 url(bg-1920.jpg)'});
                        $('body').css({'background':'#001920 url(bg-1920.jpg)'});
                        break;
                    case 1600:
                        $('div').css({'background':'#160000 url(bg-1600.jpg)'});
                        $('body').css({'background':'#001600 url(bg-1600.jpg)'});
                        break;
                    case 1280:
                        $('div').css({'background':'#128000 url(bg-1280.jpg)'});
                        $('body').css({'background':'#001280 url(bg-1280.jpg)'});
                        break;
                    case 1152:
                        $('div').css({'background':'#115200 url(bg-1152.jpg)'});
                        $('body').css({'background':'#001152 url(bg-1152.jpg)'});
                        break;
                    default:
                        $('div').css({'background':'#102400 url(bg-1024.jpg)'});
                        $('body').css({'background':'#001024 url(bg-1024.jpg)'});
                }
                    //alert(rsw);
                    //$('div').html(rsw);
                    $('.res').append(' '+sw);
                    $('div.res').css('width', 1920);
                }
                //alert(sw);
                wres();
            });
        </script>
    </head>
    <body>
        <h1 class="res">Resolução atual:</h1>
        <div class="res">The div</div>
    </body>
</html>

您可以为背景创建 CSS 类，并使用 .toggleClass()

You could try jquery/js to change the background image:

<!doctype html>
<html>
    <head>
        <title>Width resolution</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body {
                font-size: 20px;
                font-family: arial,helvetica,sans-serif;
                font-weight: 700;
                color:#eee;
                text-shadow: 0px 0px 1px #999;
}
            div {
                width:auto;
                height:340px;
                border:#ccc groove 2px;
                padding:5px;
            }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('body').css({'background-color':'#ccc'});

                var sw = screen.width;

            function wres() {
                switch(sw) {
                    case 1920:
                        $('div').css({'background':'#192000 url(bg-1920.jpg)'});
                        $('body').css({'background':'#001920 url(bg-1920.jpg)'});
                        break;
                    case 1600:
                        $('div').css({'background':'#160000 url(bg-1600.jpg)'});
                        $('body').css({'background':'#001600 url(bg-1600.jpg)'});
                        break;
                    case 1280:
                        $('div').css({'background':'#128000 url(bg-1280.jpg)'});
                        $('body').css({'background':'#001280 url(bg-1280.jpg)'});
                        break;
                    case 1152:
                        $('div').css({'background':'#115200 url(bg-1152.jpg)'});
                        $('body').css({'background':'#001152 url(bg-1152.jpg)'});
                        break;
                    default:
                        $('div').css({'background':'#102400 url(bg-1024.jpg)'});
                        $('body').css({'background':'#001024 url(bg-1024.jpg)'});
                }
                    //alert(rsw);
                    //$('div').html(rsw);
                    $('.res').append(' '+sw);
                    $('div.res').css('width', 1920);
                }
                //alert(sw);
                wres();
            });
        </script>
    </head>
    <body>
        <h1 class="res">Resolução atual:</h1>
        <div class="res">The div</div>
    </body>
</html>

You can create CSS classes for the backgrounds instead, and use .toggleClass()

回复 原文
怕倦 2024-11-07 05:32:45

您无法在所有浏览器/版本等中可靠地调整背景图像的大小...

您在 thesixtyone.com 网站上看到的效果是通过将普通内联图像拉伸到其容器（即占位符划分）的 100% 来实现的。然后其他元素漂浮在这个“背景”部分的顶部。

所以答案不是使用背景图像，而是让图像在占位符中填充屏幕，然后将其他元素放在其上面。

You can not reliably resize background images across all browsers/versions etc...

The effect you see on thesixtyone.com site is achieved by stretching a normal inline image to 100% of it's container which is a placeholder division. Other elements are then floated over the top of this 'background' division.

So the answer is not to use a background image, but to make an image fill the screen in a placeholder, then put other elements on top of it.

回复 原文
红焚 2024-11-07 05:32:44

对于 CSS3，您可以使用 background-size 属性。

背景大小：包含；
将图像缩放到最大尺寸，同时保留其固有的纵横比（如果有），使其宽度和高度都能适合背景定位区域。

Contain 始终适合视口内的整个图像，只要背景图像和浏览器窗口的比例不同，就会在上下或左右留下不透明边框。

背景大小：封面；
将图像缩放到最小尺寸，同时保留其固有的纵横比（如果有），使其宽度和高度都可以完全覆盖背景定位区域。

Cover 总是填充浏览器窗口，在此过程中剪掉一些头发或耳朵，这是我个人在大多数情况下更喜欢的。您可以使用背景位置属性控制图像在视口中的对齐方式。

With CSS3, you would use background-size property.

background-size: contain;
Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

Contain always fits the entire image within your viewport, leaving opaque borders on either the top-bottom or the left-right whenever the ratio of the background image and browser window are not the same.

background-size: cover;
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

Cover always fills the browser window, cutting off some hair or ears in the process, which is what I personally prefer for most cases. You can control how your image is aligned within the viewport by using the background-position property.

回复 原文
~没有更多了~

关于作者

擦肩而过的背影

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文