为较小尺寸的屏幕调整图像尺寸答案

【问题标题】：Adjusting image size for smaller sized screens为较小尺寸的屏幕调整图像尺寸
【发布时间】：2014-12-20 22:49:50
【问题描述】：

有没有办法让图像调整到用户的屏幕尺寸？ (HTML/CSS)

我已经尝试过媒体查询，但除了我认为的文本之外，它们并没有被证明很有用。

@media screen and (min-width:600px) {
#dick{
    color: black;
    z-index: 400;
    position:absolute;
    left: 58%;
    top: 210px;
    height: 50%;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size:100%;
}
}

【问题讨论】：

标签： html css image resize

【解决方案1】：

只要使宽度跨度尽可能大即可。

img {
    width: 100%;
}

【讨论】：

你是一个不为人知的天才，它有一些缺陷，但我可以自己编码出来。有什么方法可以将文本大小更改为用户的屏幕大小？
谢谢，记得把它标记为正确答案，这样其他人就不必查看其他答案了。关于font-size，我使用em 和“内容优先”的方法来实现这一点。我们无法在这里深入探讨，您需要通过发布另一个问题来启动另一个线程。

【解决方案2】：

你可以定义一个类 resize-img 并将这个类添加到你的 img 标签中：

   <img class="resize-img">

然后在你的样式表中：

  @media screen and (min-width:600px) {

     .resize-img{

        width: 100px;
        height:200px;
        // and whatever else :d

    }

 }


   @media screen and (min-width:1000px) {

     .resize-img{

        width: 300px;
        height:600px;
        // and whatever else :d

    }

 }

【讨论】：

感谢您的回答！

【解决方案3】：

对于图像元素 id.ot 提供了答案。对于背景图片，您可以使用：

html, body, .column {
    padding: 0;
    margin: 0;
}
body {
    background: url('http://placehold.it/300x300') no-repeat 0px 0px/100vw;
    font-size: 10vh;
}
h2 {
    font-size: 2em;
}

<h1>This is the header</h1>
<p>and some paragraph text</p>

在使用“整页”查看模式时尝试调整窗口大小并查看图像如何调整大小。如果你不关心失真，你甚至可以使用

background: url('http://placehold.it/300x300') no-repeat 0px 0px/100vw 100vh;

顺便说一句，vw 和 vh 单位也可用于调整文本大小（关于您对 id.ot 答案的评论）。

【讨论】：

非常感谢您的遮阳篷！