Question

在图像上使用“更多”按钮时，图像尺寸较小。我正在尝试使图像在使用计算机时看起来更小，但保持移动版本的大小不变。当我更改PC版图片的尺寸时，图片对于移动版而言变得太小。

    <style>
.container {
  position: relative;
  width: 100%;
}


.container img {
  width: 100%;
  height: auto;
}


.container .btn {
  position: absolute;
  top: 80%;
  left: 80%;
  transform: translate(-80%, -80%);
  -ms-transform: translate(-80%, -80%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.container .btn:hover {
  background-color: black;
}</style>

<div class="container">
  <img src="/wp-content/uploads/2019/11/jaunaudzes-kopšana.jpg" alt="Jaunaudzes kopšana">
  <button class="btn">Rādīt vairāk</button>
</div>

个人计算机版本图片-https://imgur.com/EDhZE7q 手机版本-https://imgur.com/xBZ2yhp

所以我想缩小PC版本的图像，并保持相同的移动尺寸。有什么建议吗？

Answer 1

您可以使用媒体查询来解决您的问题。在下面的代码中，每当屏幕尺寸大于480px时，代码就会“执行”。

@media only screen and (min-width: 480px) {
  .container img {
     width: 80%;
     height: auto;
  }
}

图片上的“阅读更多”

1 个答案: