使用 CSS 自动调整浏览器大小的图像

自动调整浏览器大小的图像

关注

发信

关注(28)粉丝(399)

本文介绍了使用 CSS 自动调整浏览器大小的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望在调整浏览器窗口大小时自动调整所有(或部分)图像的大小.我找到了以下代码 - 但它没有做任何事情.

HTML

<html lang="zh-cn"><头><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="style.css" type="text/css" media="screen"/><身体><div id="图标"><div id="联系人"><img src="img/icon_contact.png" alt=""/>

<img src="img/icon_links.png" alt=""/>

CSS

body {字体系列:Arial；字体大小:11px；颜色:#ffffff；背景:#202020 url(../../img/body_back.jpg) 无重复顶部中心固定；背景尺寸:封面；}#icons {位置:绝对；底部:22%；正确:8%；宽度:400px；高度:80px；z-索引:8；变换:旋转(-57度)；-ms-transform:旋转(-57度)；-webkit-transform:旋转(-57度)；-moz 变换:旋转(-57 度)；}#接触 {向左飘浮;光标:指针；}图片{最大宽度:100%；高度:自动；}

我如何基本上拥有全屏设计(带有 background-size:cover)并且在调整大小时让 div 元素位于完全相同的位置(明智的百分比)浏览器窗口，它们的大小也会调整大小(就像 cover 为背景所做的那样)?

解决方案

例如:

img {最大宽度:100%；高度:自动；宽度:自动9；/* ie8 */}

然后您只需使用 img 标签添加的任何图像都将灵活

此处为 JSFiddle 示例. 不需要 JavaScript.适用于最新版本的 Chrome、Firefox 和 IE(这是我测试过的所有版本).

I want all (or just some) of my images getting resized automatically when I resize my browser window.I've found the following code - it doesn't do anything though.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="icons">
            <div id="contact">
                <img src="img/icon_contact.png" alt="" />
            </div>
            <img src="img/icon_links.png" alt="" />
        </div>
    </body>
</html>

CSS

body {
    font-family: Arial;
    font-size: 11px;
    color: #ffffff;
    background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
    background-size: cover;
}

#icons {
    position: absolute;
    bottom: 22%;
    right: 8%;
    width: 400px;
    height: 80px;
    z-index: 8;
    transform: rotate(-57deg);
    -ms-transform: rotate(-57deg);
    -webkit-transform: rotate(-57deg);
    -moz-transform: rotate(-57deg);
}

#contact {
    float: left;
    cursor: pointer;
}


img {
    max-width: 100%;
    height: auto;
}

How can I basically have a fullscreen design (with background-size: cover) and have div elements be at exactly the same position (% wise) when resizing the browser window, with their size also resizing (like cover is doing for the background)?

解决方案

for example :

img {
    max-width: 100%;
    height: auto;
    width: auto9; /* ie8 */
}

and then any images you add simply using the img tag will be flexible

JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).

这篇关于使用 CSS 自动调整浏览器大小的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-04 07:30