制作响应式图片

Question

/如何将图片的宽度和高度设置为 150px 并具有响应性/

/HTML/

<div class="tabs__tab-image-container"> 
    <img src="https://pbs.twimg.com/profile_images/1208234904405757953/mT0cFOVQ_400x400.jpg" class="tabs__tab-content-img">
</div>

/CSS/

.tabs__tab-image-container {
        max-width: 150px;
        min-height: 150px;
        height: 100%;
        width: 100%;
    }
    tabs__tab-content-img {
        border-radius: 50%;
        max-width: 150px;
        height: auto;
        display: block;
        object-fit: cover;
    }

Answer 1

您的问题需要更清楚。您希望图像始终为 150px 正方形但 DIV 响应？还是您希望 IMAGE 在 DIV 中响应？由于您只显示一个包含单个图像的 DIV，因此很难说出目标是什么。

响应式页面是根据视口大小而变化的页面；在这种情况下，将图像锁定到固定大小有点违背了目的。您的 CSS 也没有使用图像类，因为它的格式不正确。

以下修复了您指定的图像类，但所做的只是围绕图像角；内容不会响应：

CSS：

.tabs__tab-image-container {
    max-width: 150px;
    min-height: 150px;
    height: 100%;
    width: 100%;
 }

 .tabs__tab-content img {
    border-radius: 50%;
    max-width: 150px;
    height: auto;
    display: block;
    object-fit: cover;
}

HTML：

<div class="tabs__tab-image-container"> 
  <div class="tabs__tab-content"><img src="https://pbs.twimg.com/profile_images/1208234904405757953/mT0cFOVQ_400x400.jpg">
  </div>
</div>  

要使页面具有响应性，您可以在 CSS 中为不同的页面大小添加视口，或者如果只是显示图像（例如在 div 中显示一行文本），请使用以下内容：

CSS：

.tabs__tab-image-container {
    text-align:center;
    font-family: "Comic Sans MS", cursive;
    font-size: 10.0vw;
    font-weight:700;
  }
.tabs__tab-content img {
    border-radius: 50%;
    width: 100%;
 }

HTML：

<div class="tabs__tab-image-container">
  <div class="tabs__tab-content"><img src="https://pbs.twimg.com/profile_images/1208234904405757953/mT0cFOVQ_400x400.jpg">
Text Here
  </div>
</div>

如果你只需要图片，你甚至不需要 tabs__tab-image-container 类，只需使用针对图片的标签内容类即可。