Question

所以我有一个图像，我有一个透明背景的文本框覆盖在图像上（仅供参考，它包含项目的价格，如果它是onsale）。我希望文本框“适合”它所覆盖的图像的宽度。目前，文本比图像宽。我已经尝试调整宽度，但这似乎只是缩小它并将盒子移出图像。

这是我打算创造的。请注意，文本仅与图像一样宽。 http://imgur.com/zKzjIyF

方框内的红色方框位于左侧的第一个项目，即背心中的女孩。

HTML：

<div class="date-container">
<div class="date-heading" style="display: block;">Friday, Oct 11, 2013</div>
<div class="items-purchased-container">
    <DIV style="position: absolute; top:10px; left:355px; width:200px; height:25px">3</span>&nbsp;items purchased</p>
    </div>
    <div class="total-spend-container">
        <div class="product">
            <img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" alt="" />
            <div class="description">
                <p>Sex shirt in sparkly black <span class="price">Price $500</span>
                </p>
            </div>
        </div>
        <div class="product">
            <img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" alt="" />
            <div class="description">
                <p>Sex shirt in sparkly black <span class="price sale">Sale Price $500</span>
                </p>
            </div>
        </div>

CSS：

body {
background:#00000;
text-align:center;
 }
.product {
display:inline-block;
position:relative;
margin-right:10px;
vertical-align:top;
}
.product img {
display:block;
max-width:100%;
}
.description {
position:absolute;
background:rgba(255, 255, 255, 0.75);
top:60%;
;
text-align:center;
width:100%;
}
.description span {
display:block;
margin-top:10px;
padding:5px;
}
.sale {
background:red;
}

Answer 1

以下是供您查看的JSFiddle文件：CLICK HERE

如上所述，Giovanni Silveira，您的图像包含一个大的左/右边框。您可以在自己喜欢的图像编辑器中裁剪，也可以操纵代码以适应您喜欢的添加区域。

我确实添加了一些更改以强制您正在寻找的外观，但是如果您想要一个不那么干扰的设置，那么根据您的需要更改图像是明智的。

要查看页面的设置方式，只需添加

即可

border: 1px solid #ccc;

到您的产品和描述类，以查看流程并更好地了解图像对文档流的影响。

希望这会有所帮助。

以下是代码：

HTML：

<div class="orderinfo">
    <div class="date">Friday, Oct 11, 2013</div>
    <div class="purchaseitems">3 items purchased</div>
</div>
<div class="total-spend-container">
    <div class="product">
        <img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" style="width:300px;height:250px" alt="" />
    <div class="description">
        <p>Sex shirt in
            <br>sparkly black</br> <span class="price">Price $500</span>
        </p>
    </div>
</div>
<div class="product">
    <img src="https://theory.alluringlogic.com/api/v1/productvariation/3/1058.jpg?preset=XS" style="width:300px;height:250px" alt="" />
    <div class="description">
        <p>Sex shirt in
            <br>sparkly black</br> <span class="price sale">Sale Price $500</span>
        </p>
    </div>
</div>

CSS：

body {
    background: #00000;
    text-align: center;
}
.orderinfo {
    position: relative;
    width: 100%;
    min-width: 650px;
    font-family: "Courier", sans-serif;
    font-size: 20px;
}
.date, .purchaseitems {
    float: left;
    width: 49%;
    padding-bottom: 10px;
}
.total-spend-container {
    min-width: 650px;
}
.product {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 250px;
}
.product img {
    background-position: center;
    background-size: cover;
}
.description {
    position: absolute;
    background: rgba(255, 255, 255, 0.75);
    font-family: "Courier", sans-serif;
    font-style: italic;
    top: 50%;
    text-align: center;
    left: 25%;
    width: 50%;
}
.description span {
    display: inline-block;
    margin-top: 10px;
    padding: 3px;
}
.sale {
    background: red;
    color: white;    
}

如何制作一个描述框＆＃34; fit＆＃34;在图像宽度HTML内

1 个答案: