在 CSS 中使用媒体查询

Question

我正在开发 Shopify 主题，并希望在视口小于 1024 像素时仅向轮播图片添加媒体查询。现在图像的宽度和高度为 100%，并在左侧和右侧进行了裁剪。我不希望图像被裁剪，所以我不想对高度应用任何东西。

这是主题的代码：

.objFit {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    font-family: 'object-fit: cover;object-position:center;';
  }
}

这就是我假设我应该添加的内容。

@media(max-width: 1023px) {
.objFit {
  width: 100%;
  position: relative;
  overflow: hidden;

  img {
    display: block;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    font-family: 'object-fit: cover;object-position:center;';
  }
}
}

我试图切换高度和宽度，所以宽度在前，但它破坏了旋转木马。

我似乎无法使用预览来测试我的代码，所以想先在这里问一下。

Answer 1

您可以在两个元素上保留 height: 100%。只需将媒体查询中的 cover 更改为 contain 即可。您也不需要重复在媒体查询中保持不变的规则。

我添加了两个示例，一个用于横向图像，另一个用于纵向图像，所以您可以看到会发生什么。

这是关于 object-fit 的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

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

.objFit {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1023px) {
  .objFit img {
    object-fit: contain;
  }
}

<div class="objFit">
  <img src="https://via.placeholder.com/900x300">
</div>

<div class="objFit">
  <img src="https://via.placeholder.com/300x900">
</div>

在 CSS 中使用媒体查询

Using media queries in CSS

css

shopify

media-queries

shopify-template