当 window 宽度变小时，它超过了内容

Question

这是我的代码：

$("window").load(function() {
  $("#body").removeClass("preload");
});

$(".share-btn").mouseenter(function() {
  setTimeout(function() {
    $(".item-menu").addClass("visible")
  }, 500);
});
$(".share-btn").mouseleave(function() {
  setTimeout(function() {
    $(".item-menu").removeClass("visible")
  }, 500);
});
$(".item-menu").hover(function() {
  $(".item-menu").addClass("visible")
});
$(".item-menu").mouseleave(function() {
  setTimeout(function() {
    $(".item-menu").removeClass("visible")
  }, 500);
});
$(".container-item").hover(function() {
  setTimeout(function() {
    $(".container-item").css("z-index", "1000")
  }, 500);
});

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

.item {
  width: 96%;
  height: 415px;
  background-image: url(http://sappun.diskn.com/outsidemall/globalsite/promotion/en/200612/product/7-1.jpg);
  -webkit-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  /*top:0;
    left:0;*/
  z-index: 5;
  overflow: hidden;
}

.item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  -webkit-transition: background-color 0.3s ease-in-out;
  -moz-transition: background-color 0.3s ease-in-out;
  -ms-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

.item:hover .item-overlay {
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.42) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(28%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.42)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.42) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.42) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.42) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.42) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6b000000', GradientType=0);
  /* IE6-8 */
  background-color: rgba(0, 0, 0, 0.4);
}

.item-content {
  position: absolute;
  width: 100%;
  bottom: 0;
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  -o-transform: translate(0, 100%);
  transform: translate(0, 100%);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.item:hover .item-content {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.item-content {
  background: rgba(255, 255, 255, .85);
  height: 70px;
  padding: 15px;
}


/*<!-------------------------->*/

#contentWrap {
  width: 69% !important;
  min-width: unset !important;
}

#content {
  width: 100% !important;
}

#bid_4_box {
  width: 90%;
  height: auto;
  margin: 0 auto;
}

.four_inbox {
  width: 25%;
  height: auto;
  float: left;
  text-align: center;
  margin-bottom: 20px;
}

.four_img {
  width: 97%;
  height: auto;
  margin: 0 auto;
}

.fourbox_text_info {
  text-align: left;
  margin-left: 6px;
}

.fourbox_product_name {
  font-family: 'heebo', 'Noto Sans KR';
  font-size: 12px;
}

.fourbox_b_price {
  display: inline-block;
  color: #d42c20;
  font-size: 12px;
}

.fourbox_p_price {
  text-decoration-line: line-through;
  display: inline-block;
  font-size: 12px;
}

@media screen and (max-width: 1050px) {
  .four_inbox {
    width: 50% !important;
  }
}

.bf_p {
  display: inline-block;
  margin-top: -20px;
}

@media screen and (max-width: 1800px) {
  #contentWrap {
    width: 88% !important;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>

  <div class="wrapper" id="bid_4_box">
    <div class="four_inbox">
      <section class="row">
        <div class="item">
          <div class="item-overlay"></div>
          <div class="item-content">
            <div class="fourbox_text_info section" id="tt">
              <p class="fourbox_product_name">[SAPPUN BASIC] Kamishu Daily Flip-flop &amp; Slipper (1cm)</p>
              </br>
              <div class="bf_p">
                <p class="fourbox_b_price">22.95 USD</p>&nbsp; &nbsp;
                <p class="fourbox_p_price">45.90 USD</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="four_inbox">
      <section class="row">
        <div class="item">
          <div class="item-overlay"></div>
          <div class="item-content">
            <div class="fourbox_text_info section" id="tt">
              <p class="fourbox_product_name">[SAPPUN BASIC] Kamishu Daily Flip-flop &amp; Slipper (1cm)</p>
              </br>
              <div class="bf_p">
                <p class="fourbox_b_price">22.95 USD</p>&nbsp; &nbsp;
                <p class="fourbox_p_price">45.90 USD</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="four_inbox">
      <section class="row">
        <div class="item">
          <div class="item-overlay"></div>
          <div class="item-content">
            <div class="fourbox_text_info section" id="tt">
              <p class="fourbox_product_name">[SAPPUN BASIC] Kamishu Daily Flip-flop &amp; Slipper (1cm)</p>
              </br>
              <div class="bf_p">
                <p class="fourbox_b_price">22.95 USD</p>&nbsp; &nbsp;
                <p class="fourbox_p_price">45.90 USD</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="four_inbox">
      <section class="row">
        <div class="item">
          <div class="item-overlay"></div>
          <div class="item-content">
            <div class="fourbox_text_info section" id="tt">
              <p class="fourbox_product_name">[SAPPUN BASIC] Kamishu Daily Flip-flop &amp; Slipper (1cm)</p>
              </br>
              <div class="bf_p">
                <p class="fourbox_b_price">22.95 USD</p>&nbsp; &nbsp;
                <p class="fourbox_p_price">45.90 USD</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>



</body>

当您悬停 img 时，它会显示 产品名称 和价格，包括“不透明度”黑色背景。

问题是当 window 尺寸变小时，将尺寸悬停在 img 上。

我被这个问题困住了，我想要的只是 hover 内容保留在 img 内，它不能取决于 window 大小。

我们将不胜感激。

Answer 1

您的 item 有 96% 宽度和固定 415px 高度。当您调整 window 大小时，item 的 with/height 比例发生变化，图像未覆盖整个元素。

解决方案 1

更改 background-size 的 item 以使图像始终覆盖整个元素：

  .item {
     ...
     -webkit-background-size: cover;
     -moz-background-size: cover; /* add if you want to support Firefox 3.6 */
     -o-background-size: cover;
     background-size: cover;
     ...
   }

解决方案 2

如果你只有方形图片（或者它的with/height比率是常数），改变item的宽度和高度如下：

  .item {
     ...
     width: 96%;
     height: 0;
     padding-bottom: 100%;
     ...
   }

在容器底部添加100% padding 和0 高度将使容器高度与宽度相同（100% 指容器宽度）。要使其正常工作，请记住将 box-sizing 全局设置为 border-box 或为您的 item 容器（参考：）。

解决方案 3（最佳）：

重构你的 HTML 和 CSS 以使用 flex/grid 系统并将你的图像放在 HTML 中（而不是 CSS 背景）。

当 window 宽度变小时，它超过了内容

When window width becomes small it's over the content

html

css

jquery

responsive