如何在更大的縮放級別顯示圖像後的產品信息

在購物車的詳細信息頁面產品圖像使用下面的代碼定義。它的比例應該保留。如何在更大的縮放級別顯示圖像後的產品信息

對於更大的縮放級別，圖像隱藏其後的文字開始。

如何在所有縮放級別正確渲染此頁面？

對於未知原因div #productinfo從左側開始，但它在圖像後開始。我試圖添加display：inline-block到每個div，但是這沒有任何作用。使用jquery，jquery ui，fancybox和pikachoose。

HTML：

<div style="float: left; width: 30%; margin-right: 1%"> 
      <a href="#" class="details-picture"> 
       <img src="/Thumb?product=1308318&amp;size=198" alt=""> 
      </a> 
     </div> 
<div id="productinfo"> 
<div> 
      Price <span id="Price"> 
       1.73 
      </span> 
    </div>

CSS：

.details-picture { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: thin ridge #BBBBBB; 
    display: block; 
    float: left; 
    height: 200px; 
    line-height: 200px; 
    margin: 0 20px 15px 0; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    width: 198px; 
} 
.details-picture img { 
    border-width: 0; 
    height: auto; 
    max-height: 198px; 
    max-width: 198px; 
    vertical-align: middle; 
    width: auto; 
}

來源

2013-02-17 Andrus

這似乎是由於那些內嵌在頂層div屬性。 float: left和width: 30%的組合導致您遇到的問題。

<div class="productimage"> 
    <a href="#" class="details-picture"> 
     <img src="/Thumb?product=1308318&amp;size=198" alt="" /> 
    </a> 
</div> 
<div class="productinfo"> 
    <div> 
     Price <span id="Price">1.73</span> 
    </div> 
</div>

jsfiddle

來源

2013-02-17 10:53:32

謝謝。這解決了這個問題。我根本就刪除了productimage div。這個div不是必須的，造型錨元素就夠了，不是嗎？ – Andrus 2013-02-17 12:04:50

@安德魯斯是的，造型錨元素在技術上是足夠的。如果您將要使用這些圖像和信息中的多個，請確保您使用類而不是ID。另外，如果是這種情況，我可能會建議將每個集合包含在「

...

」中以便清晰和分離。 – 2013-02-17 19:38:35

如何在更大的縮放級別顯示圖像後的產品信息

回答

相關問題