解決在小屏幕上擊中文本內容的CSS圖像位置

我遇到CSS問題。當小屏幕上的瀏覽器出現圖像不響應時，我無法確定圖像的位置。我試過position:relative;並手動設置邊距，但沒有解決。解決在小屏幕上擊中文本內容的CSS圖像位置

這是我的HTML代碼：

<div id="home-product-slider" class="home-section" style="display:none;"> 
<div class="col-sm-8 col-sm-offset-2"> 
    <div class="row mini-product-wrapper"> 
     <div class="col-sm-12"> 
     <img src="<?php echo get_template_directory_uri(); ?>/assets/img/home_product_glasku_capuccino.png" alt="" class="img-responsive img-home-product ihp-thumb"> 
     <div class="product-box" style="margin-top:200px"> 
      <div class="product-hero-box text-left"> 
       <h4 style="color:white;"> 
        <br/>GLASKU CAPPUCINO<br/> 
       </h4> 
       <div class="product-box-text"> 
        <p>Glasku Cappuccino hadir dalam kemasan 165ml dalam variasi rasa kopi susu dengan harga yang affordable dengan tidak mengorbankan kualitas produk yang dihasilkan. Praktis dan menyegarkan untuk dinikmatin.</p> 
        <a href="/index.php/our-products/glasku/#0" class="small" style="color:white;">Read more >></a> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 
</div>

，在這裏我的CSS：

#home-product-slider .img-home-product.ihp-thumb { width: 45%; position: absolute; top: 0;right: 0;}

謝謝！

來源

2015-07-02 Haryono Sariputra

你應該張貼在PHP，而不是發佈了PHP本身 –

IM SRY siguza一個生成的HTML只是生成URL我想.. –

要有圖像響應，設置max-width: 100%和圖像

來源

2015-07-02 08:10:08

我曾嘗試但形象太大先生 –

的height: auto你爲什麼不嘗試使用@media查詢在你的CSS文件。這裏是鏈接，請參閱本，並嘗試實施（http://www.w3schools.com/cssref/css3_pr_mediaquery.asp）

來源

2015-07-02 08:14:44

應該試試這個先生，謝謝 –

任何其他建議先生？仍然沒有線索 –

解決在小屏幕上擊中文本內容的CSS圖像位置

回答

相關問題