您如何使图像准确地跨越eBay描述字段的宽度? (无水平滚动)

问题描述 投票:1回答:1

eBay列表中的描述字段不得超过5000个字符。它允许一些html标签和style属性,但是许多功能被禁用。

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

[似乎是使用最广泛且官方推荐的调整屏幕大小的方法,如here所述,使用meta标签更改了视口。

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

还是我只是使用meta标签错误? (我将<meta name="viewport" content="width=device-width, initial-scale=1">放在第一行,并在其下写了其余的描述。)

html ebay-design-templates
1个回答
0
投票

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

[很遗憾,您知道,在响应式CSS方面,eBay有点垃圾,因此在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>
© www.soinside.com 2019 - 2024. All rights reserved.