Question

有没有办法让图片大小调整到用户的屏幕尺寸？（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%;
}
}

Answer 1

简单地使宽度跨度尽可能多。

img {
    width: 100%;
}

Answer 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

    }

 }

Answer 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的回答的评论）。

调整较小尺寸屏幕的图像尺寸

3 个答案: