文章/答案/技术大牛

发布

问奇怪的移动css行为
EN

Stack Overflow用户

提问于 2021-06-09 19:53:45

回答 1查看 25关注 0票数 0

我有一个基本的CSS图片库，它在桌面设备上工作得很好，如果我在Mozilla Responsive Design Mode或这个CodePen中模拟移动视图，也可以很好地工作，但似乎不能在真正的移动设备上正常工作。

:root {
  --blue: #6483B2ff;
  --dark-blue: #1d3557;
  --light-blue: #e1e5f2;
  --white: #ffffff;
  --flag-blue: #0038B8;
  --error: #660000;
}

#gallery {
  margin: 3em 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#gallery .quote {
  text-align: center;
}

#gallery .gallery-layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  background: var(--light-blue);
  border-radius: 15px;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 20px;
}

#gallery .gallery-layout #gallery-items {
  display: none;
}

#gallery .gallery-layout .frame {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

#gallery .gallery-layout .frame .overlay {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  width: 100%;
  height: auto;
  background: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
}

#gallery .gallery-layout .frame .overlay .overlay-text {
  color: var(--white);
  padding: 10px;
  font-size: 1rem;
  font-variant: small-caps;
  letter-spacing: 1px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  text-align: center;
}

#gallery .gallery-layout .prev-pic, #gallery .gallery-layout .next-pic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 10px;
}

#gallery .gallery-layout .prev-pic i, #gallery .gallery-layout .next-pic i {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--dark-blue);
  width: 100%;
  height: 150px;
  padding: 5px;
}

#gallery .gallery-layout .prev-pic i:hover, #gallery .gallery-layout .next-pic i:hover {
  border-radius: 5px;
  background: var(--dark-blue);
  color: var(--light-blue);
  opacity: 0.7;
  cursor: pointer;
}

#gallery .gallery-layout i.dl-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#gallery .gallery-layout i.dl-2 {
  display: none;
}

@media screen and (max-width: 800px) {
  #gallery .gallery-layout {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0 20px;
  }
  #gallery .gallery-layout .prev-pic, #gallery .gallery-layout .next-pic {
    width: 100%;
    max-width: 150px;
  }
  #gallery .gallery-layout i.dl-1 {
    display: none;
  }
  #gallery .gallery-layout i.dl-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
    <title>Document</title>
</head>
<body>
<div id="gallery">
            <div class="gallery-layout">
                <div class="prev-pic"><i class="small material-icons dl-1">navigate_before</i><i class="small material-icons dl-2">keyboard_arrow_up</i></div>
                <div class="frame" data-id="1">
                    <img class="responsive-img" src="https://images.unsplash.com/photo-1547483029-77784da27709">
                    <div class="overlay"><span class="overlay-text">Dummy description</span></div>
                </div>
                <div class="next-pic"><i class="small material-icons dl-1">navigate_next</i><i class="small material-icons dl-2">keyboard_arrow_down</i></div>
            </div>
        </div>
</body>
</html>

在真正的移动设备上看起来像这样(在不同的浏览器上测试)：

html

css

image

mobile

responsive

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-06-09 20:02:39

默认情况下，flex子对象设置为拉伸。当你的孩子，也就是img标签设置为"height:auto;“时。它是伸展的。

您可以使用"align-items“属性来更改该行为。

#gallery .gallery-layout .frame {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;

  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67903628

复制

相似问题

问奇怪的移动css行为
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问奇怪的移动css行为EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问奇怪的移动css行为
EN