时间戳

首页 > 解决方案 > 当我在图像上设置宽度时，它会消失（fllexbox）

html - 当我在图像上设置宽度时，它会消失（fllexbox）

问题描述

我正在尝试使图像更小，但是由于某种原因，当我将宽度设置为例如 50% 时，[图像消失了。][1] 无论我设置什么宽度（甚至 110%），图像都会得到一个宽度和高度为 0；

这是一个代码片段

.exclusiveItem {
  background-image: linear-gradient(315deg, #f6a364 0%, #ffc085 74%);
  height: 70vh;
}

.exclusiveItem>.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}

.exclusiveItem {
  -webkit-box-flex: .4;
  -ms-flex: .4;
  flex: .4;
}

.exclusiveItem h1 {
  padding-bottom: 1.6rem;
  font-size: 4rem;
}

.exclusiveItem p {
  font-size: 1.5rem;
}

.exclusiveItem button {
  border: none;
  background: #FF6200;
  border-radius: 60px;
  margin-top: 2.5rem;
  padding: 1rem 3rem;
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  cursor: pointer;
}

.exclusiveItemImg {
  -webkit-box-flex: .5;
  -ms-flex: .5;
  flex: .5;
}

.exclusiveItemImg img {
  width: 50%;
  pointer-events: none;
}
<!DOCTYPE HTML>

<body>


  <!-- Exclusive Item -->
  <div class="exclusiveItem">
    <div class="container">
      <div class="exclusiveItemImg">
        <img src="assets/exclusive.png" alt="smart watch">
      </div>

      <div class="exclusiveItemContent">
        <p>Only available on Liquid</p>
        <h1>Smart Band 4</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem nihil quod praesentium enim quia, maxime excepturi molestias odio aliquam accusantium dolores optio sint qui? Dolorum, doloribus saepe! Quos, iste iure.</p>
        <a href=""><button>Buy Now ➜&lt;/button></a>
      </div>
    </div>
  </div>


</body>

Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum。[1]：https ://i.stack.imgur.com/nM0PU.png

标签： htmlcss

解决方案

编辑评论以供参考：在 CSS 中更改.exclusiveItem为.exclusiveItemContent

将您的 flex 值从 更改0.5为50%

.exclusiveItemImg {
  -webkit-box-flex: 0.5;
  -ms-flex: 0.5;
  flex: 0.5;
}

至：

.exclusiveItemImg {
  -webkit-box-flex: 50%;
  -ms-flex: 50%;
  flex: 50%;
}


.exclusiveItem {
  background-image: linear-gradient(315deg, #f6a364 0%, #ffc085 74%);
  height: 70vh;
}

.exclusiveItem>.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}

.exclusiveItem {
  -webkit-box-flex: 40%;
  -ms-flex: 40%;
  flex: 40%;
}

.exclusiveItem h1 {
  padding-bottom: 1.6rem;
  font-size: 4rem;
}

.exclusiveItem p {
  font-size: 1.5rem;
}

.exclusiveItem button {
  border: none;
  background: #FF6200;
  border-radius: 60px;
  margin-top: 2.5rem;
  padding: 1rem 3rem;
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  cursor: pointer;
}


.exclusiveItemImg {
  -webkit-box-flex: 50%;
  -ms-flex: 50%;
  flex: 50%;
}

.exclusiveItemImg img {
  width: 50%;
  pointer-events: none;
}
<!DOCTYPE HTML>

<body>


  <!-- Exclusive Item -->
  <div class="exclusiveItem">
    <div class="container">
      <div class="exclusiveItemImg">
        <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.spiritanimal.info%2Fpictures%2Fcat%2FCat-Spirit-Animal-3.jpg&f=1&nofb=1" alt="smart watch" alt="smart watch">
      </div>

      <div class="exclusiveItemContent">
        <p>Only available on Liquid</p>
        <h1>Smart Band 4</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem nihil quod praesentium enim quia, maxime excepturi molestias odio aliquam accusantium dolores optio sint qui? Dolorum, doloribus saepe! Quos, iste iure.</p>
        <a href=""><button>Buy Now ➜&lt;/button></a>
      </div>
    </div>
  </div>


</body>

推荐阅读