Fatal编程技术网
  • css/
  • 使用CSS根据浏览器大小自动调整图像大小

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

css responsive-design

使用CSS根据浏览器大小自动调整图像大小,css,resize,responsive-design,Css,Resize,Responsive Design,我希望在调整浏览器窗口大小时自动调整所有（或仅部分）图像的大小。 我发现了下面的代码-但它没有做任何事情 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

我希望在调整浏览器窗口大小时自动调整所有（或仅部分）图像的大小。 我发现了下面的代码-但它没有做任何事情

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>
当调整浏览器窗口的大小时，我怎样才能基本上有一个全屏设计（背景尺寸为封面），并且让
div
元素处于完全相同的位置（%wise），同时它们的大小也在调整（比如
cover
是为背景做的）

要使图像灵活，只需添加
最大宽度：100%
和 
高度：自动
。图像
max width:100%
和
height:auto
在IE7中工作， 但不是在IE8中（是的，另一个奇怪的IE bug）。要解决此问题，您需要 为IE8添加
width:auto\9

资料来源：

例如：

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
然后，您只需使用img标签添加的任何图像都将具有灵活性

不需要JavaScript。适用于最新版本的Chrome、Firefox和IE（这是我测试的全部）。

图像容器

仅当图像所在的容器大小发生变化时，使用上述技巧缩放图像才有效

#图标
容器使用
px
值表示宽度和高度<调整浏览器大小时，代码>px值不会缩放

解决方案

使用以下方法之一：

  • 使用
    %
    值定义宽度和/或高度
  • 使用一系列
    @media
    查询，根据当前屏幕大小将宽度和高度设置为不同的值
    • 这可能是一个过于简单的答案（我在这里还是新手），但我在过去所做的纠正这种情况的工作是计算出我希望图像占据屏幕的百分比。例如，我正在制作一个网页，其中徽标必须占屏幕大小的30%才能看起来最好。我尝试了一下，最后尝试了这个代码，到目前为止，它对我很有效：

    img {
width:30%;
height:auto;
}
    这就是说，这将改变你所有的图像在任何时候都是屏幕大小的30%。为了解决这个问题，只需将其作为一个类，并将其直接应用于您希望达到30%的图像。下面是我在上述站点上编写的代码示例：

    CSS部分：

    .logo {
position:absolute;
right:25%;
top:0px;
width:30%;
height:auto;
}
    HTML部分：

    <img src="logo_001_002.png" class="logo">
    或者，您可以将希望自动调整大小的图像放置到自己的div中，并在每个div上使用class-tag选项（在需要时立即创建class-tags），但我觉得这最终会导致大量额外的工作。但是，如果站点需要它：站点需要它

    希望这能有所帮助。祝你今天愉快

    以下内容适用于我的200个数字的所有浏览器，适用于任何宽度百分比——尽管这是非法的。Jukka说“无论如何都要使用它。”（这个类只是将图像向左或向右浮动并设置边距。）我无法想象为什么这不是标准方法

    <img class="fl" width="66%"
src="A-Images/0.5_Saltation.jpg"
alt="Schematic models of chromosomes ..." />
    更改窗口宽度和图像倾斜缩放。

    你是说Responsive css，否则只需更改位置修复可能重复的感谢，但我已经这样做了（请参见上面的代码），当我将浏览器窗口变小时，图像不会调整大小？谢谢，这就是它的工作方式，以及我发现的其他示例。我不知道为什么它不能与我自己的测试htm页面一起工作。。。HMM代码对我不起作用，所以我将“最大宽度”改为“仅宽度”，例如，“最大宽度：100%替换为宽度：100%，这为我解决了这个问题。在FF、Safari和Chrome以及Galaxy S4 FF和默认浏览器上进行了测试。太棒了！我正在使用Chrome，需要更改宽度：auto\9；到宽度：自动；让它工作起来。@sircapsalot您的JSFIDLE在Firefox 35上似乎根本无法按预期工作？谢谢。现在剩下的问题是，即使在一个div容器中有两个不同的图像，这两个图像的缩放方式也不同？？？@Simon：图像的缩放是基于它们的直接父容器。这两个图像具有不同的父容器。一个在图标中，另一个在联系人中
    #contact
    也必须进行缩放，以与
    #icons
    一致的方式进行缩放。嗯，我已经调整了，但只有第二个div在调整大小时正确调整大小，而第一个div只有在我将窗口调整得更大时才会调整大小。@Simon:一个div的宽度为
    100%宽度：100%，则没有理由将其浮动。但是，可能您需要图像容器的宽度小于
    100%
    （其中一个或两个可以浮动），这取决于您试图做什么（我不知道它应该是什么样子）。

    <img class="fl" width="66%"
src="A-Images/0.5_Saltation.jpg"
alt="Schematic models of chromosomes ..." />