使用 CSS 自动调整浏览器大小的图像 [英] Automatically resize images with browser size using CSS

查看：22 发布时间：2022/1/4 17:59:04 css resize responsive-design

本文介绍了使用 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 为背景所做的那样)?

解决方案

要使图像灵活，只需添加 max-width:100% 和高度:自动.图片 max-width:100% 和 height:auto 适用于 IE7，但不是在 IE8 中(是的，另一个奇怪的 IE 错误).要解决此问题，您需要为 IE8 添加 width:auto9.
来源:http://webdesignerwall.com/tutorials/responsive-design-with-css3-媒体查询

例如:

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)?

解决方案

To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto9 for IE8.

source: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

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 自动调整浏览器大小的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

使用 CSS 自动调整浏览器大小的图像 [英] Automatically resize images with browser size using CSS

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

使用 CSS 自动调整浏览器大小的图像 [英] Automatically resize images with browser size using CSS

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭