哪些CSS元素阻止这些图像响应调整大小?

时间:2016-05-17 16:04:14

标签: html css

我正在开发一个从外部源(eBay产品列表)导入HTML的网站。我试图确定什么CSS或HTML阻止产品描述中的图像响应调整大小。

以下是示例页面:

http://216.120.237.30/~theioutlet/product/test-product/

我最感兴趣的图像是响应(尽管它们都应该是):

https://snag.gy/8CzKZO.jpg

https://snag.gy/ETVzAi.jpg

和各种按钮

https://snag.gy/M3WuVd.jpg

有一次,我改变了一些非常简单的事情,图像开始响应地调整大小。但当时我正在开发第三方ebay导入插件演示网站,我不记得在这些测试中我改变了什么,而且我无法再现这种效果。令人沮丧。

1) 你能告诉我是什么阻止图像(在产品描述中)响应地调整大小?

我试图在jsfiddle上重新创建代码,https://jsfiddle.net/250rcgbb/

那里可能有过多的CSS,因为我已经提取了相关页面加载的各种CSS源代码。由于我不确定哪个声明(或声明的组合)导致了这个问题(因此我的问题),我将其保留为原样。

这是我在jsfiddle上发布的代码:



.plus,
.minus {
  background: none !important;
}

.sd-fixed-width .site {
  background-color: #fcfcfc;
}

.sticky-wrapper,
.sd-sticky-navigation,
.sd-sticky-navigation:before,
.sd-sticky-navigation:after {
  background-color: #2c2d33;
}

.main-navigation ul li a,
.site-title a,
ul.menu li a,
.site-branding h1 a,
.site-footer .storefront-handheld-footer-bar a:not(.button),
button.menu-toggle,
button.menu-toggle:hover {
  color: #aaaaaa;
}

button.menu-toggle,
button.menu-toggle:hover {
  border-color: #aaaaaa;
}

.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.site-title a:hover,
a.cart-contents:hover,
.site-header-cart .widget_shopping_cart a:hover,
.site-header-cart:hover > li > a,
ul.menu li.current-menu-item > a {
  color: #dcdcdc;
}

table th {
  background-color: #e6e6e6;
}

table tbody td {
  background-color: #ebebeb;
}

table tbody tr:nth-child(2n) td {
  background-color: #e9e9e9;
}

.site-header,
.secondary-navigation ul ul,
.main-navigation ul.menu > li.menu-item-has-children:after,
.secondary-navigation ul.menu ul,
.storefront-handheld-footer-bar,
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li.search .site-search,
button.menu-toggle,
button.menu-toggle:hover {
  background-color: #333333;
}

p.site-description,
.site-header,
.storefront-handheld-footer-bar {
  color: #878787;
}

.storefront-handheld-footer-bar ul li.cart .count,
button.menu-toggle:after,
button.menu-toggle:before,
button.menu-toggle span:before {
  background-color: #aaaaaa;
}

.storefront-handheld-footer-bar ul li.cart .count {
  color: #333333;
}

.storefront-handheld-footer-bar ul li.cart .count {
  border-color: #333333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #333333;
}

.widget h1 {
  border-bottom-color: #333333;
}

body,
.secondary-navigation a,
.onsale,
.pagination .page-numbers li .page-numbers:not(.current),
.woocommerce-pagination .page-numbers li .page-numbers:not(.current) {
  color: #666666;
}

.widget-area .widget a,
.hentry .entry-header .posted-on a,
.hentry .entry-header .byline a {
  color: #989898;
}

a {
  color: #45924a;
}

a:focus,
.button:focus,
.button.alt:focus,
.button.added_to_cart:focus,
.button.wc-forward:focus,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
  outline-color: #45924a;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.widget a.button,
.site-header-cart .widget_shopping_cart a.button {
  background-color: #333333;
  border-color: #333333;
  color: #ffffff;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.added_to_cart:hover,
.widget a.button:hover,
.site-header-cart .widget_shopping_cart a.button:hover {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: #ffffff;
}

button.alt,
input[type="button"].alt,
input[type="reset"].alt,
input[type="submit"].alt,
.button.alt,
.added_to_cart.alt,
.widget-area .widget a.button.alt,
.added_to_cart,
.pagination .page-numbers li .page-numbers.current,
.woocommerce-pagination .page-numbers li .page-numbers.current,
.widget a.button.checkout {
  background-color: #45924a;
  border-color: #45924a;
  color: #ffffff;
}

button.alt:hover,
input[type="button"].alt:hover,
input[type="reset"].alt:hover,
input[type="submit"].alt:hover,
.button.alt:hover,
.added_to_cart.alt:hover,
.widget-area .widget a.button.alt:hover,
.added_to_cart:hover,
.widget a.button.checkout:hover {
  background-color: #2c7931;
  border-color: #2c7931;
  color: #ffffff;
}

#comments .comment-list .comment-content .comment-text {
  background-color: #e6e6e6;
}

.site-footer {
  background-color: #f0f0f0;
  color: #666666;
}

.site-footer a:not(.button) {
  color: #666666;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
  color: #333333;
}

#order_review,
#payment .payment_methods li .payment_box {
  background-color: #ededed;
}

#payment .payment_methods li {
  background-color: #e8e8e8;
}

#payment .payment_methods li:hover {
  background-color: #e3e3e3;
}

@media screen and ( min-width: 768px) {
  .secondary-navigation ul.menu a:hover {
    color: #a0a0a0;
  }
  .secondary-navigation ul.menu a {
    color: #878787;
  }
  .site-header-cart .widget_shopping_cart,
  .main-navigation ul.menu ul.sub-menu,
  .main-navigation ul.nav-menu ul.children {
    background-color: #2b2b2b;
  }
}

</style> <link rel='stylesheet' id='storefront-fonts-css' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,400italic,700,900&#038;subset=latin%2Clatin-ext' type='text/css' media='all' /> <link rel='stylesheet' id='storefront-jetpack-style-css' href='http://216.120.237.30/~theioutlet/wp-content/themes/storefront/assets/sass/jetpack/jetpack.css?ver=2.0.1' type='text/css' media='all' /> <link rel='stylesheet' id='sd-styles-css' href='http://216.120.237.30/~theioutlet/wp-content/plugins/storefront-designer/assets/css/style.css?ver=4.5.2' type='text/css' media='all' /> <link rel='stylesheet' id='sd-styles-2-css' href='http://216.120.237.30/~theioutlet/wp-content/plugins/storefront-designer/assets/css/style-2.css?ver=4.5.2' type='text/css' media='all' /> <link rel='stylesheet' id='sph-styles-css' href='http://216.120.237.30/~theioutlet/wp-content/plugins/storefront-parallax-hero/assets/css/style.css?ver=4.5.2' type='text/css' media='all' /> <style id='sph-styles-inline-css' type='text/css'> .sph-hero a:not(.button) {
  color: #96588a;
}

.overlay.animated h1:after {
  color: #96588a;
}

.overlay.animated span:before {
  background-color: #45924a;
}

</style> <link rel='stylesheet' id='storefront-woocommerce-style-css' href='http://216.120.237.30/~theioutlet/wp-content/themes/storefront/assets/sass/woocommerce/woocommerce.css?ver=4.5.2' type='text/css' media='all' /> <style id='storefront-woocommerce-style-inline-css' type='text/css'> a.cart-contents,
.site-header-cart .widget_shopping_cart a {
  color: #aaaaaa;
}

table.cart td.product-remove,
table.cart td.actions {
  border-top-color: #ededed;
}

.woocommerce-tabs ul.tabs li.active a,
ul.products li.product .price,
.onsale,
.widget_search form:before,
.widget_product_search form:before {
  color: #666666;
}

.woocommerce-breadcrumb a,
a.woocommerce-review-link,
.product_meta a {
  color: #989898;
}

.onsale {
  border-color: #666666;
}

.star-rating span:before,
.quantity .plus,
.quantity .minus,
p.stars a:hover:after,
p.stars a:after,
.star-rating span:before,
#payment .payment_methods li input[type=radio]:first-child:checked+label:before {
  color: #45924a;
}

.widget_price_filter .ui-slider .ui-slider-range,
.widget_price_filter .ui-slider .ui-slider-handle {
  background-color: #45924a;
}

.woocommerce-breadcrumb,
#reviews .commentlist li .comment_container {
  background-color: #e6e6e6;
}

.order_details {
  background-color: #e6e6e6;
}

.order_details li {
  border-bottom: 1px dotted #d1d1d1;
}

.order_details:before,
.order_details:after {
  background: -webkit-linear-gradient(transparent 0, transparent 0), -webkit-linear-gradient(135deg, #e6e6e6 33.33%, transparent 33.33%), -webkit-linear-gradient(45deg, #e6e6e6 33.33%, transparent 33.33%)
}

@media screen and ( min-width: 768px) {
  .site-header-cart .widget_shopping_cart,
  .site-header .product_list_widget li .quantity {
    color: #878787;
  }
}

.main-navigation ul li.smm-active li ul.products li.product h3 {
  color: #878787;
}

.single-product div.product .onsale + .product_title + .woocommerce-product-rating + div[itemprop="offers"] .price {
  border-color: #45924a;
}

.sd-header-sticky .secondary-navigation {
  background-color: #ededed;
}

.page-template-template-homepage .site-main ul.tabs li a,
.woocommerce-breadcrumb a {
  color: #666666;
}

.pagination .page-numbers li .page-numbers.current,
.woocommerce-pagination .page-numbers li .page-numbers.current {
  background-color: transparent;
  border-color: #45924a;
  color: #45924a;
}

.woocommerce-breadcrumb {
  color: #b1b1b1;
}

.page-template-template-homepage .site-main ul.tabs li a.active,
.page-template-template-homepage .site-main ul.tabs li a:hover,
.single-product div.product .woocommerce-product-rating a,
.woocommerce-breadcrumb a:hover {
  color: #343434;
}

ul.products li.product .star-rating span:before,
.page-template-template-homepage .site-main .storefront-product-section ~ .storefront-product-section:not(.last) ul.products li.product.product-category h3,
.page-template-template-homepage .site-main .storefront-product-section ~ .storefront-product-section:not(.last) ul.products li.product.product-category h3 mark {
  color: #333333;
}

ul.products li.product a:hover h3,
ul.products li.product .price,
.single-product div.product .summary .price,
.page-template-template-homepage .site-main .storefront-product-section ~ .storefront-product-section ul.products li.product.product-category a:hover h3,
.page-template-template-homepage .site-main .storefront-product-section ~ .storefront-product-section ul.products li.product.product-category a:hover h3 mark {
  color: #45924a;
}

.single-product div.product .onsale,
ul.products li.product.product-category a:hover h3,
ul.products li.product a .onsale {
  background-color: #45924a;
}

.a-primary-navigation {
  border-top-color: #45924a;
}

.site-header-cart .widget_shopping_cart a {
  color: #aaaaaa;
}

.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.main-navigation ul.menu li.current-menu-item > a,
.main-navigation ul.nav-menu li.current-menu-item > a,
.site-header-cart .widget_shopping_cart a:hover,
.main-navigation ul li.smm-active .widget ul:not(.products) li a:hover {
  color: #dcdcdc !important;
}

.site-title a,
.site-branding h1 a,
ul.menu li a.cart-contents {
  color: #464646;
}

.site-title a:hover,
.site-branding h1 a:hover,
ul.menu li a.cart-contents:hover {
  color: #141414;
}

@media screen and (min-width: 768px) {
  .site-header-cart .cart-contents span.count:before {
    border-color: #45924a;
  }
  .site-header-cart .widget_shopping_cart,
  .main-navigation > li > a:before,
  .main-navigation ul.menu > li > a:before,
  .main-navigation ul.nav-menu > li > a:before {
    border-top-color: #45924a;
  }
  .site-header-cart .cart-contents span.count:after {
    border-top-color: #45924a;
    border-left-color: #45924a;
    border-right-color: #45924a;
  }
}

@charset "utf-8";

/* CSS Document */

#container {
  width: 920px
}

#header {
  margin-bottom: 10px;
  color: #FFFFFF;
  width: 900px;
  margin-left: 10px;
  margin-right: 10px;
}

.col1 {
  float: left;
  width: 540px;
  margin-left: 10px;
  display: inline;
}

.col2 {
  float: left;
  width: 350px;
  margin-left: 10px;
  margin-right: 10px;
}

.col3 {
  float: left;
  width: 630px;
  margin-left: 10px;
  display: inline;
}

.col4 {
  float: left;
  width: 260px;
  margin-left: 10px;
  margin-right: 10px;
}

.full {
  clear: both;
  padding-top: 25px;
  width: 900px;
  margin-left: 10px;
  margin-right: 10px;
}

br {
  line-height: 5px;
}

h2,
p {
  margin-left: 7px;
  margin-right: 7px;
  margin-top: 7px;
  margin-bottom: 7px;
  text-align: center;
}

ul {
  list-style-image: url(../images/tick.png);
}

li {
  color: black;
  padding: 0;
  padding-left: 1em;
  margin-bottom: 10px;
  background-position: 2em;
}

.ribbon {
  width: 90%;
  margin: 10px auto;
  padding: 0 10px 0;
  position: relative;
  color: #444;
  background: #fff;
  border: 1px solid #45924A;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ribbon h3 {
  display: block;
  height: 30px;
  line-height: 1.6em;
  width: 100%;
  margin: 0;
  margin-bottom: 20px;
  padding: 5px 16px;
  position: relative;
  left: -16px;
  top: 8px;
  color: #ffffff;
  text-shadow: 0 1px 1px #111;
  border-top: 1px solid #45924A;
  border-bottom: 1px solid #45924A;
  background: #45924A;
  background: linear-gradient(top, #383838 0%, #262626 100%);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ribbon h3::before,
.ribbon h3::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  bottom: -11px;
  z-index: -10;
  border: 5px solid;
  border-color: #242424 transparent transparent transparent;
}

.ribbon h3::before {
  left: 0;
}

.ribbon h3::after {
  right: 0;
}

.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

h4 {
  text-align: center;
}

.greenText {
  color: #45924A;
}

.brownText {
  color: #C4A621;
}

.purpleText {
  color: #A66ECA;
}

body {
  font-family: "Open Sans", sans-serif;
}

.image-wrapper img {
  max-width: 100% !important;
  height: auto;
  display: block;
}
&#13;
<div id="container">
  <div id="header">
    <div class="image-wrapper"><img src="https://dl.dropboxusercontent.com/u/98230963/iOUTLETBanner.png" alt="THE_iOUTLET" width="1000" height="370" /></div>
  </div>
  &nbsp;
  <div class="col3">
    <div class="ribbon">
      <h3>iPhone 6 Plus 16GB Space Grey - Vodafone/TalkTalk/Lebara</h3>
      <div class="image-wrapper"><img class="displayed" src="https://dl.dropboxusercontent.com/u/98230963/5Ssealed/6Grey.jpg" alt="iPhone" width="600" height="360" /></div>
      <table border="0px" align="center">
        <tbody>
          <tr>
            <td><strong>Phone Rating:</strong></td>
            <td>
              <div class="image-wrapper"><img src="https://dl.dropboxusercontent.com/u/98230963/5Ssealed/5Stars.png" alt="Phone Rating" width="180" height="30" /></div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="col4">
    <div class="ribbon">
      <h3>What's included?</h3>
      <ul>
        <ul>
          <li>iPhone 6 Plus 16GB Space Grey</li>
          <li>12 Months Warranty</li>
          <li>UK Version</li>
          <li>Generic box</li>
          <li>Generic USB Cable</li>
          <li>iOS 8 Ready</li>
        </ul>
      </ul>
      &nbsp;

    </div>
  </div>
  <div class="full">
    <table border="0px" align="center">
      <tbody>
        <tr>
          <td><img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/CustomerSatisfaction.png" alt="100% Customer Satisfaction" width="140" height="60" align="middle" />
            <img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/PaypalVerified.png" alt="Paypal Verified" width="140" height="60" align="middle" />
            <img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/FastDelivery.png" alt="Fast Delivery" width="140" height="60" align="middle" />
            <img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/Recycled.png" alt="100% Recyled Pre-owned Products" width="140" height="60" align="middle" />
            <img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/TopSellerRated.png" alt="Top Seller Rated" width="140" height="60" align="middle" />
            <img src="http://simplicitywebsitedesign.com/iOutlet/images/buttons/PhoneSupport.png" alt="Phone Support" width="140" height="60" align="middle" /></td>
        </tr>
      </tbody>
    </table>
    &nbsp;
    <div class="ribbon">
      <h3 align="center">Description</h3>
      <div align="center">
        <div>
          <div>
            <p align="center"><span style="color: #00429a; font-size: x-large;"><b><span class="Apple-style-span" style="font-family: Impact;">THIS PHONE IS LOCKED to Vodafone UK. Therefore it will only work using an </span>Vodafone/TalkTalk/Lebara <span style="font-family: Impact;">Sim card</span></b>
              </span>
            </p>
            <p align="center"><b style="color: #003162; font-family: Impact;"> </b></p>
            <p align="center"><b style="color: #003162; font-family: Impact;"> </b></p>
            <b>Handsets and accessories as listed only. This item has been opened and activated to check functionality.</b>

          </div>
          <div><b> </b></div>
          <div><b> All are as  will come repackaged in generic box. All phones are 100% original. Why pay new prices when you can have grade A for a fraction.</b></div>
          <div><b> </b></div>
          <div><b>All phones will come with 12 month warranty</b></div>
          <div></div>
          <div><span class="Apple-style-span" style="color: #00429a;">We are a UK based large seller of iPhones, please check us out on the internet and buy with confidence.</span></div>
          <div><span class="Apple-style-span" style="color: #00429a;"> </span></div>
          <div><span class="Apple-style-span" style="color: #00429a;"> </span></div>
          <div><span class="Apple-style-span" style="color: #00429a;">iPhone 6 plus spec:</span></div>
          <div><span class="Apple-style-span" style="color: #00429a;"><span class="Apple-style-span" style="color: #00429a;"><span class="Apple-style-span" style="font-family: Karla, sans-serif; font-size: 13px;">
</span></span>
            </span>
            <div class="key display" style="color: #4b4b4b; outline: none; float: left; font-weight: bold; line-height: 18px; margin-bottom: 20px; padding-left: 40px; width: 113px; background-position: 0% 0%;">
              <h4 style="outline: none; margin: 0px 0px 5px; padding: 0px; font-weight: normal !important;">Display</h4> 5.50-inch

            </div>
            <div class="key processor" style="color: #4b4b4b; outline: none; float: left; font-weight: bold; line-height: 18px; margin-bottom: 20px; padding-left: 40px; width: 113px; background-position: 0% -42px;">
              <h4 style="outline: none; margin: 0px 0px 5px; padding: 0px; font-weight: normal !important;">Processor</h4> Apple A8

            </div>
            <div class="key frontcam" style="color: #4b4b4b; outline: none; float: left; font-weight: bold; line-height: 18px; margin-bottom: 20px; padding-left: 40px; width: 113px; background-position: 0% -84px;">
              <h4 style="outline: none; margin: 0px 0px 5px; padding: 0px; font-weight: normal !important;">Front Camera</h4> 1.2-megapixel

            </div>
            <div class="key resolution" style="color: #4b4b4b; outline: none; float: left; font-weight: bold; line-height: 18px; margin-bottom: 20px; padding-left: 40px; width: 113px; background-position: 0% -126px;">
              <h4 style="outline: none; margin: 0px 0px 5px; padding: 0px; font-weight: normal !important;">Resolution</h4> 1080x1920 pixels

            </div>
            <div class="key ram" style="color: #4b4b4b; outline: none; float: left; font-weight: bold; line-height: 18px; margin-bottom: 20px; padding-left: 40px; width: 113px; background-position: 0% -167px;">
              <h4 style="outline: none; margin: 0px 0px 5px; padding: 0px; font-weight: normal !important;">RAM</h4> 1GB

            </div>
            <div class="key os" style="color: #4b4b4b; outline: none; float: left; font-weight: bold; line-height: 18px; margin-bottom: 20px; padding-left: 40px; width: 113px; background-position: 0% -208px;">
              <h4 style="outline: none; margin: 0px 0px 5px; padding: 0px; font-weight: normal !important;">OS</h4> iOS 8.0

            </div>
            <div class="key storage" style="outline: none; float: left; font-weight: bold; line-height: 18px; margin-bottom: 20px; padding-left: 40px; width: 113px; background-position: 0% -251px;">
              <h4 style="color: #4b4b4b; outline: none; margin: 0px 0px 5px; padding: 0px; font-weight: normal !important;">Storage</h4> 16
              <span style="color: #4b4b4b;">GB</span>

            </div>
            <div class="key rearcam" style="color: #4b4b4b; outline: none; float: left; font-weight: bold; line-height: 18px; margin-bottom: 20px; padding-left: 40px; width: 113px; background-position: 0% -83px;">
              <h4 style="outline: none; margin: 0px 0px 5px; padding: 0px; font-weight: normal !important;">Rear Camera</h4> 8-megapixel

            </div>
            <div class="key battery" style="color: #4b4b4b; outline: none; float: left; font-weight: bold; line-height: 18px; margin-bottom: 20px; padding-left: 40px; width: 113px; background-position: 0% -334px;">
              <h4 style="outline: none; margin: 0px 0px 5px; padding: 0px; font-weight: normal !important;">Battery capacity</h4> 2915mAh

            </div>
          </div>
          <div><span class="Apple-style-span" style="color: #00429a;"> </span></div>
          <div><span class="Apple-style-span" style="color: #00429a;"> </span></div>
          <div><span class="Apple-style-span" style="color: #00429a;"> </span></div>
          <div><span class="Apple-style-span" style="color: #00429a;"> </span></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div>This model has 16GB storage</div>
        </div>
        <div align="center">
          <p style="text-align: center; margin: 7px;" align="center"><strong><span class="Apple-style-span" style="font-family: 'Arial Black';"> </span></strong></p>
          <p style="text-align: center; margin: 7px;" align="center"><span class="Apple-style-span" style="font-family: 'Arial Black';"><b> </b></span></p>
          <p style="text-align: center; margin: 7px;" align="center"><span class="Apple-style-span" style="color: #00456d; font-family: Impact; font-size: large;"><span class="Apple-style-span" style="line-height: normal;"><b> </b></span></span>
          </p>

          <div style="font-family: 'Arial Black'; text-align: center;"><strong style="font-weight: bold;"><strong style="font-weight: bold;"><span style="font-family: Arial Black;">
</span></strong></strong>
            <p style="text-align: center; display: inline !important; margin: 7px;" align="left"></p>

            <b>    </b>
            <p style="font-weight: bold; text-align: center; margin: 7px;" align="center"><span style="color: #ff0010; font-family: Arial; font-size: 18pt;"><span style="color: #000000; font-size: small;"><strong><span style="color: #00ae5f;"><span style="color: #000000; font-family: Arial Black; font-size: medium;"><span style="font-size: x-large;"> </span></span>
              </span>
              </strong>
              </span>
              </span>
            </p>
            <p style="text-align: center; margin: 7px;" align="center"><span class="Apple-style-span" style="color: #000000; font-size: x-large;"><span class="Apple-style-span" style="font-weight: 800;"> </span></span>
            </p>

          </div>
        </div>
      </div>
      <div align="center"><strong><strong><span style="font-family: Arial Black;">
</span></strong></strong>
        <div style="text-align: center;"></div>
      </div>
    </div>
  </div>
</div>
&nbsp;
<div class="col2">
  <div class="ribbon">
    <h3>Why buy from THE_iOUTLET?</h3>
    <ul>
      <li>All iPhones are fully tested and in perfect working order.</li>
      <li>We post Special Delivery for FREE so you get it the next day where possible.</li>
    </ul>
  </div>
</div>
<div class="full">
  <div class="image-wrapper"><img src="https://dl.dropboxusercontent.com/u/98230963/Footer2.png" alt="THE_iOUTLET" width="1000" height="251" /></div>
</div>
&#13;
&#13;
&#13;

2) 另外,你能告诉我为什么绿色图标(https://snag.gy/nqMHpf.jpg)在实际网站上垂直显示?我注意到在这里提供的代码片段和jsfiddler中,它们按照我的意愿水平显示。但是在Firefox中查看它们时,它们位于下一个上方。

1 个答案:

答案 0 :(得分:0)

您的容器宽度设置为静态金额 - width:920px,但它只是隐藏了溢出的内容。因此,每当您减小屏幕尺寸时 - 您的容器宽度不会低于该容器宽度,因此您的图像仍然适合该容器。

修改:您的.col3也有设定的宽度。