如何使图像完全跨越eBay描述字段的宽度？(无水平滚动)

Question

eBay列表有一个描述字段，限制为5000个字符。它允许一些 html 标签和样式属性，但禁用了许多功能。

当我插入太宽的图像时，eBay会添加水平滚动，这是一种糟糕的用户体验。我想要一个自动调整为可用宽度而不触发水平滚动的图像。

似乎使用最广泛且官方推荐的调整到不同屏幕大小的方法是使用元标记更改视口，如此处所述。

不幸的是，这也改变了文本大小，并且不提供仅缩放一个图像而不缩放其他图像的选项。这是唯一的方法吗？还是有别的办法？

还是我只是错误地使用了元标记？(我把<meta name="viewport" content="width=device-width, initial-scale=1">放在第一行，并在下面写下其余的描述。

Answer 1

这是我过去用于模板的旧代码。使用容器和远程托管的CSS，我能够将图像限制到包裹在整个模板周围的容器中。

不幸的是，如您所知，eBay在响应式CSS方面有点垃圾，因此在1400px以下(我认为(下效果不佳。

我认为您可以添加一些响应式媒体查询，以便正确堆叠。但是，这恐怕是在良好的响应式设计时代之前创建的。

.CSS

@charset "utf-8";
/* CSS Document */
body {
background:#ffffff;
/*background-image:url(http://www.unbmedia.co.uk/Clients/UNB09029/bg.jpg);*/
background-position:center;
background-repeat:repeat-y;
}
/* Constrain Page Size */
.pagewidth {
width:954px;
text-align: centre;
left: 0;
margin:auto;
}

.pageminwidth {
text-align: left;
left: 0;
}
/* Footer Links with Country Names */
#sFooter {
text-align:center;
font-size:10px;
}
/* Ebay Footer Links */
span.ebay{
text-align:center;
}
#title{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
background:#548101;
color:#FFF;
padding:20px;
color:#777;
font-size:14px;
padding:3px;
font-family: serif;
letter-spacing: 0.5px;
font-weight: 100;
transition: all 0.3s;
}
#left-men-tit{
background: #18213E;
color:white;
font-size:14px;
padding:3px;
font-family: serif;
letter-spacing: 0.5px;
font-weight: 100;
transition: all 0.3s;
padding:10px;
}
#left-men{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#548101;
font-size:14px;
padding-left:12px;
padding-top:3px;
padding-bottom:3px;
}
#desc-title-list{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#548101;
font-size:12px;
}
#desc-desc-list{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;   color:#000000;
font-size:12px;
}
#product-desc-title{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;   color:#fff;
font-size:12px;
background-color:#548101;
padding:10px;
}
#product-desc{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
font-size:12px;
padding-left:5px;
}
td#product-desc{
border:thin;
border-color:#000;
}
table#desc{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
vertical-align:text-top;
}
#Main{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
vertical-align:top;
}
#main-holder{
font-size:0px;
}
/* Category Links */
a:link{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#777;
font-size:12px;
padding:3px;
text-decoration:none;
font-weight:bold;
}
a:visited{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#777;
font-size:12px;
padding:3px;
text-decoration:none;
font-weight:bold;
}
a:hover{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color: #18213E;
font-size:12px;
/*background:#024873;*/
text-decoration:none;
padding:3px;
font-weight:bold;
padding-left: 7px;
}
a:active{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
color:#548101;
font-size:12px;
/*background:#024873;*/
text-decoration:none;
padding:3px;
font-weight:bold;
}
div#EBdescription{
font-size:0px;
}
/*** NEW LISTING TEMPLATE CSS ***/
.container{ width: 100%; max-width: 1100px; margin:auto;}
.ebayList-MainCol{float: right; width: 79%;}
.ebayList-LeftCol{float: right; width: 21%; margin-top: 162px;}
.ebayList-LeftCol h3{display: block; width: 87%; padding: 10px; margin: 0 0px 0 0; background: #18213E; color: white;
font-size: 16px; font-weight: 100; border: 1px solid black; width: 200px;}
.ebayList-LeftCol ul{ border: 1px solid #CCC; padding: 10px; margin: 0 10px 0 0; }
.ebayList-LeftCol li:before { content: ">"; padding-left: 5px; padding-right: 5px; margin-left: 0px; font-size: 14px;}
.ebayList-LeftCol li{ list-style: none; font-size: 14px; font-weight: 100; color:#777; padding: 10px 0;}
.ebayList-LeftCol li a:link{font-weight: 100; color:#777!important; font-family: serif; font-size: 14px; letter-spacing: 0.5px; transition: all 0.3s;}
.ebayList-LeftCol li a:hover{transition: all 0.3s;}
.ebayList-Header img{ width: 100%;}
.ebayList-ProductImage{width: 100%; text-align: center;}
.ebayList-ProductImage img{width: 100%; margin: auto; position: relative; text-align: center;}
.ebayList-ProductImage h1{ text-align: center; font-weight: 100; letter-spacing: 1px; font-size: 26px; color: #18213E; max-width: 900px; width: 100%; margin: 50px auto; }
.ebayList-Summary--Wrapper{float: left;}
.ebayList-Summary { width: 50%; float: left;}
.ebayList-Summary h2{ font-weight: 100; font-size: 16px; margin-top: 30px; border-bottom: 1px solid #ccc;padding-bottom: 10px;}
.ebayList-Summary p{ font-weight: 100; font-size: 14px; line-height: 22px;}
.ebayList-Spec { width: 48%; float: left; margin-bottom: 20px; margin-top: 0px; padding-left: 2%}
.ebayList-Spec h2{font-weight: 100; font-size: 16px; margin-top: 30px; border-bottom: 1px solid #ccc;padding-bottom: 10px;}
.ebayList-Spec dl{ width: 100%;}
.ebayList-Spec dt{ width: 30%; float: left; font-weight: bold; margin: 0; font-size: 14px; margin-bottom: 5px;}
.ebayList-Spec dd{ width: 70%; float: left; margin: 0; font-size: 14px; margin-bottom: 5px;}
.ebayList-Shipping-Returns { float: left; width: 50%; text-align: left; margin-bottom: 50px;}
.ebayList-Shipping-Returns img{width:98%;}
.ebayList-Shipping-Returns + .ebayList-Shipping-Returns{text-align: right;}
.ebayList-footer{float: left;}
.ebayList-footer img{ width: 100%;}
@media (max-width:1000px) {
.ebayList-LeftCol{ display: none; }
.ebayList-MainCol{ width: 100%; }
}
@media (max-width:700px) {
.ebayList-Spec{ width: 100%; padding-left: 0;}
.ebayList-Summary{ width: 100%; }
.ebayList-Shipping-Returns{ width: 100%; }
}

房源描述：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://remote.littens.co.uk/listing.css" type="text/css">
<div class="container">
<div class="ebayList-Header"><img src="https://remote.littens.co.uk/header.png" alt=""></div>
<div class="ebayList-MainCol">
<div class="ebayList-ProductImage">
<h1>CHILDREN'S CHARACTER DESIGN BEANBAG BEAN BAG SEAT FILLED JUNIOR KIDS TODDLER</h1>
<img src="https://i.ebayimg.com/00/s/OTIxWDEyMjg=/z/tagAAOSw-vlViACO/$_57.JPG?set_id=880000500F">
</div>
<div class="ebayList-Summary--Wrapper">
<div class="ebayList-Summary">
<h2>Product Summary</h2>
<p>These are official novelty character licensed beanbags. These are filled to a perfect volume of 3 cubic ft, giving it an ideal structure and cushioning for the children to sit and enjoy. These would make an ideal piece of soft furniture in
a child’s room. All our products are fully compliant to the UK Furniture and Furnishings Regulations.</p>
<p>Please select the design you require from the drop down menu at the top.</p>
</div>
<div class="ebayList-Spec">
<h2>Specification</h2>
<dl>
<dt>Product</dt>
<dd>Beanbag</dd>
<dt>Brand</dt>
<dd>Assort</dd>
<dt>Version</dt>
<dd>Kids</dd>
<dt>Colour</dt>
<dd>Assort</dd>
<dt>Size</dt>
<dd>3 Cubic Feet</dd>
<dt>Dimensions</dt>
<dd>50x50x50cm</dd>
<dt>Includes</dt>
<dd>Beanbag &amp; Filling</dd>
<dt>Material</dt>
<dd>100% Cotton / Polystyrene Bead</dd>
<dt>Washable</dt>
<dd>Cover Machine Washable</dd>
<dt>Suitability</dt>
<dd>Over 3 Years Of Age</dd>
</dl>
</div>
</div>
<div class="ebayList-Shipping-Returns">
<img src="https://remote.littens.co.uk/postage-info.png" alt="">
</div>
<div class="ebayList-Shipping-Returns">
<img src="https://remote.littens.co.uk/returns-policy.png" alt="">
</div>
</div>
<div class="ebayList-LeftCol">
<h3>Shop Categories</h3>
<ul>
<li><a href="http://stores.ebay.co.uk/Littens-Co/Duvets-/_i.html?_fsub=2&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Duvets</a></li>
<li><a href="http://stores.ebay.co.uk/Littens-Co/Pillows-/_i.html?_fsub=9&amp;_lns=2&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Pillows</a></li>
<li><a href="http://stores.ebay.co.uk/Littens-Co/Mattress-Toppers-/_i.html?_fsub=1442372012&amp;_lns=2&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Mattress Toppers</a></li>
<li><a href="http://stores.ebay.co.uk/Littens-Co/Curtains-/_i.html?_fsub=3367499012&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Curtains</a></li>
<li><a href="http://stores.ebay.co.uk/Littens-Co/Duvet-Cover-Sets-/_i.html?_fsub=7&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Duvet Covers Sets</a></li>
<li><a href="http://stores.ebay.co.uk/Littens-Co/Cushion-Covers-/_i.html?_fsub=10617545012&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Cushion Covers</a></li>
<li><a href="http://stores.ebay.co.uk/Littens-Co/Bedding-Bundle-Sets-/_i.html?_fsub=3&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Bedding Bundle Sets</a></li>
<li><a href="http://stores.ebay.co.uk/Littens-Co/Childrens-Room-/_i.html?_fsub=8&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Childrens Room</a></li>
<li><a href="http://stores.ebay.co.uk/Littens-Co/Nursery-Baby-/_i.html?_fsub=1066056012&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Nursery &amp; Baby</a></li>
<li><a href="http://stores.ebay.co.uk/Littens-Co/Livingroom-/_i.html?_fsub=1269320012&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Livingroom</a></li>
<li><a href="http://stores.ebay.co.uk/Littens-Co/Bed-Linen-/_i.html?_fsub=1442373012&amp;_sid=167663432&amp;_trksid=p4634.c0.m322">Bed Linen</a></li>
<li><a href="Bedspreads / Throws">Bedspreads / Throws</a></li>
</ul>
</div>
<div class="ebayList-footer">
<img src="https://remote.littens.co.uk/footer.png" alt="footer">
</div>
</div>

Answer 2

我在尝试解决相同问题时发现了这个网站。我是编码新手，通常对东西进行逆向工程，直到我得到一些工作。 我的横幅与ebay商店横幅的图像网址相同，但它无法使用我使用的代码正确缩放。

碰巧我尝试了以下内容，它似乎有所帮助。 如果它帮助了别人，那就太好了。

<style>
.co_logo { 
display: flex;
margin-bottom: 10px;
}
.logo_img {
max-width: 100%;
flex-grow: 1;
}
<style>
<div class="co_logo">
<img class="logo_img" src="INSERT LOGO IMG URL HERE">
</div>