时间戳

首页 > 解决方案 > 无法使用视口宽度使图像响应

html - 无法使用视口宽度使图像响应

问题描述

我试图通过使用视口宽度而不是像素（vh）来使图像响应，但是当我调整页面大小时，文本也会随着图像一起移动，我试图通过更改从像素移动到的文本的字体大小来解决这个问题vh 但它没有用。

我在 html 头中还有以下元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML

<body>
    <div id="top">
        <div class="kygo">Kygo</div>
        <div class="img"> <img src="maskGroup1.png" alt="Profile Picture"></div>
        <div class="tag">#000</div>
        
    </div>
    <div id="bottom"></div>
</body>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden
  }

#top{
    float:bottom;
    background-color:#1A1C1E;
    width:100%;
    height:200px;
}
#bottom{
    position: relative;
    float: top;
    background-color:#2F3136;
    width:100%;
    height:1000px;
}

.kygo{
    font-family: Segoe UI;
    font-weight: 700;
    padding-top: 24px;
    padding-left: 103px;
     color: white;
     font-size: 20px;
}

.tag{
    font-family: Segoe UI;
    font-weight: 400;
    margin-top: -40px;
    padding-left: 103px;
     color: #A2A4A8;
     font-size: 13px; 
}

img{
    max-width: 11.333vw;
    max-width:  20vw;
    padding-left: 27px;
    margin-top: -27px;
}

在此处输入图像描述

感谢您的阅读。

标签： htmlcss

解决方案

对于响应式图像使用宽度（以 % 为单位）。并做了如下修改

html, body {
    margin: 0;
    padding: 0;
  }

#top{
    background-color:#1A1C1E;
    width:100%;
    height:200px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
#bottom{
    position: relative;
    float: top;
    background-color:#2F3136;
    width:100%;
    height:1000px;
}

.kygo{
    font-family: Segoe UI;
    font-weight: 700;
     color: white;
     font-size: 20px;
}

.tag{
    font-family: Segoe UI;
    font-weight: 400;
     color: #A2A4A8;
     font-size: 13px; 
}

.name {
  width:75%;
  padding-left:5px;
}
.img{
  width:25%;
  padding-left:5px;
}
img {
  width:100%;
  border-radius: 300px;
}
<body>
    <div id="top">
       <div class="img"> <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="Profile Picture">
        </div>
        <div class="name">
            <div class="kygo">Kygo</div>
        
            <div class="tag">#000</div>
        </div>
        
    </div>
    <div id="bottom"></div>
</body>

推荐阅读