在 CSS 中使用媒体查询

问题描述

我正在开发 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;';
  }
}
}

我尝试切换高度和宽度，因此宽度在前，但它打破了轮播。

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

解决方法

您可以在两个元素上保留 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>