您如何使图像准确地跨越 eBay 的描述字段的宽度？（没有水平滚动）

Question

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

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

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

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

还是我只是使用了错误的元标记？（我把<meta name="viewport" content="width=device-width, initial-scale=1">写在第一行，然后把剩下的描述写在下面。）

Answer 1

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

不幸的是，如您所知，eBay 在响应式 CSS 方面有点垃圾，所以这在 1400 像素以下时效果不佳（我认为）。

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

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>

您如何使图像准确地跨越 eBay 的描述字段的宽度？（没有水平滚动）

How do you make an image span the width of eBay's description field exactly? (No horizontal scrolling)

html

ebay-design-templates

您如何使图像准确地跨越 eBay 的描述字段的宽度？ （没有水平滚动）

How do you make an image span the width of eBay's description field exactly? (No horizontal scrolling)

html

ebay-design-templates

您如何使图像准确地跨越 eBay 的描述字段的宽度？（没有水平滚动）