我正在尝试设计一个可重复使用的组件以显示Web产品信息-我已经在固定宽度的div中进行了模拟，但现在需要使其具有响应能力-我一直在使用flex布局。
创建了一个小提琴来演示问题
https://jsfiddle.net/0sz523Lj/5/
该组件包括整个容器的图像，然后是部分照片上左对齐的不透明面板，其中包含产品详细信息。主照片的高度应确定不透明度面板的高度，因为主照片将拉伸以填充100％的宽度，并且显然高度会调整以使照片保持比例。调整屏幕大小后，不透明度面板现在应占据照片的高度，并且内容可以缩放以适合。
此面板包括顶部的产品名称，简短说明，缩略图，价格和几个按钮，以查找更多或购买。
除blurb以外的所有尺寸实际上都是固定大小的-可能将产品名称分为两行或一行，但是blurb是主要内容。当前，如果您将屏幕放大，则主图像会变大，不透明度面板的宽度是固定的，因此只能更改其高度，但是由于它不足以填充不透明度，因此您最终会在blurb下获得大量空白面板。如果缩小屏幕，则说明框不适合容器的高度，并且不透明度容器会超出图片高度。
我想知道最好的响应方式是什么-只有两个想法出现。一种是根据屏幕大小来更改字体大小，以便使blurb适合左容器的相同固定部分。这感觉不对。唯一的其他选择是使不透明度面板本身根据屏幕尺寸更改宽度。
实际上，您希望代码适合标题，缩略图，成本和购买按钮，然后根据您调整屏幕大小的方式进行说-确定不透明度面板的高度，然后调整不透明度面板的宽度使内容完美适合。
我该如何使其完全响应？
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>
答案 0 :(得分：1)
我通过删除不必要的div并更改了几部分的语义来更改了HTML。我还删除了绝对定位，并将主产品图像更改为主容器上的背景。现在，剩余内容可以自然地放置在适当的位置。
一种完全灵活的方法是让左侧容器滚动在屏幕短时溢出的所有内容。这是通过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>