html - flex 布局和响应式设计面板

Question

我正在尝试设计一个可重复使用的组件来显示 web 产品信息 - 我已经在固定宽度的 div 中模拟了它，但现在需要让它响应 - 我一直在使用 flex 布局。

创建了一个 fiddle 来演示问题

https://jsfiddle.net/0sz523Lj/5/

该组件包含一个用于整个容器的图像，然后是一个左对齐的不透明面板，位于照片的一部分上，其中包含产品详细信息。主照片的高度应决定不透明度面板的高度，因为主照片将拉伸(stretch)以填充 100% 宽度，显然高度会调整以保持照片的比例。调整屏幕大小后，不透明度面板现在应该占据照片的高度，内容也会缩放以适合。

此面板由顶部的产品名称、简介说明、缩略图、价格和几个用于了解更多信息或购买的按钮组成。

除了广告宣传外，所有的都是固定尺寸——产品名称可能分为两行或一行，但广告宣传是主要内容。当前，如果您将屏幕变大，则主图像变大，不透明度面板的宽度固定，因此只会改变它的高度，但是您最终会在广告下方看到大量空白，因为它不足以填充不透明度控制板。如果您缩小屏幕，则宣传语不适合容器的高度，并且不透明容器会溢出图片高度。

我想知道以响应方式执行此操作的最佳方法是什么 - 我想到了两个想法。一种是根据屏幕大小更改字体大小，因此宣传语适合左侧容器的相同固定部分。这感觉不对。唯一的其他选择是让不透明面板本身根据屏幕尺寸改变宽度。

实际上，您希望代码适合标题、缩略图、成本和购买按钮，然后根据您调整屏幕大小的方式说 - 这决定了不透明面板的高度，然后调整不透明面板的宽度使内容完美契合。

我怎样才能让它完全响应？

供引用的HTML代码

<div class="image-container">
                <img src="https://images-na.ssl-images-amazon.com/images/I/71U%2B5KVElqL._SL1500_.jpg" width="100%" vspace="0" />
                <div class="image-buy-container-left">
                    <div class="image-container-title">
                        <p>Product name will go here</p>
                    </div>
                    <div class="image-container-blurb">
                        <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
                        lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
                        lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
                        lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
                            <br /><br />
                            lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
                            lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
                            lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
                            lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
                        </p>
                    </div>
                    <div class="image-container-thumbborder">
                        <div class="image-container-thumb">
                            <img src="https://us.coca-cola.com/content/dam/coke2016/page-properties-images/Coke_PageProperties.jpg" width=100% />
                        </div>
                    </div>
                    <div class="image-container-portion">
                        250ml bottle
                    </div>
                    <div class="image-container-portiondescription">
                        (Two serves)
                    </div>
                    <div class="image-container-price">
                        £13.00
                    </div>
                    <div class="image-buy-container-buttons">                        
                        <div class="image-container-button home-content__buttons ">
                            <a href="/ProductDetails.html" class="btn btn--stroke">
                                Discover
                            </a>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

我通过删除不必要的 div 并使一些部分更具语义来更改 HTML。我还删除了绝对定位并将主要产品图像更改为主容器上的背景。现在，左边的内容可以自然地就位。

实现完全灵 active 的一种方法是让左侧容器滚动屏幕较短时溢出的任何内容。这是通过 overflow-y: scroll 实现的。

阅读 CSS 中的注释，阐明每一行的作用。我的答案在大多数屏幕尺寸下运行良好，但对于所有如此灵活的东西，在极端屏幕尺寸或纵横比下需要进行调整。

* { box-sizing: border-box; } /* makes dealing with padding/width ez */
body { margin: 0; }

.image-container {
  display: flex;
  width: 100vw; /* fullscreen width */
  height: 100vh; /* fullscreen height */
  background-image: url('https://images-na.ssl-images-amazon.com/images/I/71U%2B5KVElqL._SL1500_.jpg'); /* main product image as a background */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

.image-buy-container-left {
  background: rgba(0,0,0,0.8);
  flex: 0 0 370px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /*helps when the screen gets taller than the content */
  padding: 20px; /* padding for the entire left container, no need for padding on every item inside */
  text-align: center; /* text align is inherited so only need it on the container, not on every item inside */
  overflow-y: auto; /* overflow if screen is shorter than content */
}

.image-container-title {
  margin: 0 0 1vw; /* margin based on screen width */
  font-size: 5vw; /* size based on the screen width gives a scalable font size */
  letter-spacing: .4vw; /* letter-spacing based on width */
  line-height: 1.125; /* always use realtive value for line-height if the size will change */
  color: #fff;
}

.image-container-blurb {
  color: #aaa;
  line-height: 1.2;
  font-size: 0.8rem;
}

.image-container-thumb {
  display: block;
  flex: 0 0 auto;
  margin: 2vw auto;
  width: 40%;
  height: auto;
}

.image-container-portion {
  color: #ccc;
  line-height: 1.3;
  font-size: 1.15rem;
}

.image-container-portiondescription {
  color: #aaa;
  line-height: 1.3;
  font-size: .9rem;
}

.image-container-price {
  color: #ddd;
  line-height: 1.3;
  font-size: 1.2rem;
  margin: 10px 0 20px;
}

.image-buy-container-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.home-content__buttons .btn {
  border-color: #225;
  color: #ccc;
  background: #114 !important;
  margin: 0;
  height: 70px;
  line-height: 70px;
  vertical-align: middle;
  letter-spacing: .25rem;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.home-content__buttons .btn:last-child {
  margin-right: 0;
}

.home-content__buttons .btn:hover,
.home-content__buttons .btn:focus {
  background: #ddd !important;
  border-color: #888;
  color: #333;
}

.btn,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  font-family: "montserrat-medium", sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .3rem;
  height: 5.4rem;
  line-height: calc(5.4rem - .4rem);
  padding: 0 3rem;
  margin: 0 .3rem 1.2rem 0;
  color: #000000;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #c5c5c5;
  border: .2rem solid #c5c5c5;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.btn:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  background-color: #b8b8b8;
  border-color: #b8b8b8;
  color: #000000;
  outline: 0;
}


/* button primary
 * ------------------------------------------------- */

.btn.btn--primary,
button.btn--primary,
input[type="submit"].btn--primary,
input[type="reset"].btn--primary,
input[type="button"].btn--primary {
  background: #39b54a;
  border-color: #39b54a;
  color: #FFFFFF;
}

.btn.btn--primary:hover,
button.btn--primary:hover,
input[type="submit"].btn--primary:hover,
input[type="reset"].btn--primary:hover,
input[type="button"].btn--primary:hover,
.btn.btn--primary:focus,
button.btn--primary:focus,
input[type="submit"].btn--primary:focus,
input[type="reset"].btn--primary:focus,
input[type="button"].btn--primary:focus {
  background: #33a242;
  border-color: #33a242;
}


/* button modifiers
 * ------------------------------------------------- */

.btn.full-width,
button.full-width {
  width: 100%;
  margin-right: 0;
}

.btn--medium,
button.btn--medium {
  height: 5.7rem !important;
  line-height: calc(5.7rem - .4rem) !important;
}

.btn--large,
button.btn--large {
  height: 6rem !important;
  line-height: calc(6rem - .4rem) !important;
}

.btn--stroke,
button.btn--stroke {
  background: transparent !important;
  border: 0.2rem solid #39b54a;
  color: #39b54a;
}

.btn--stroke:hover,
button.btn--stroke:hover {
  border: 0.2rem solid #000000;
  color: #000000;
}

.btn--pill,
button.btn--pill {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
  border-radius: 1000px !important;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

<div class="image-container">
  <div class="image-buy-container-left">
    <h2 class="image-container-title">
      Product name will go here
    </h2>
    <div class="image-container-blurb">
      <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
       <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </p>
    </div>
    <img class="image-container-thumb" src="https://us.coca-cola.com/content/dam/coke2016/page-properties-images/Coke_PageProperties.jpg" width=100% />
    <div class="image-container-portion">
      250ml bottle
    </div>
    <div class="image-container-portiondescription">
      (Two serves)
    </div>
    <div class="image-container-price">
      £13.00
    </div>
    <div class="image-buy-container-buttons image-container-button home-content__buttons">
        <a class="btn btn--stroke" href="/ProductDetails.html">
          Discover
        </a>
    </div>
  </div>
</div>