1

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

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

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

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

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

4

1 回答 1

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>
于 2020-06-03T07:45:30.820 回答