解决 CSS 图像位置在小屏幕上击中文本内容的问题答案

【问题标题】：Solving CSS Image Position hitting the Text Content on the Small Screen解决 CSS 图像位置在小屏幕上击中文本内容的问题
【发布时间】：2015-07-02 16:47:42
【问题描述】：

我的 CSS 有问题。当浏览器在小屏幕上时，我对图像的位置没有任何线索，图像没有响应。我试过position:relative; 并手动设置边距，但没有解决。

这是我的 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;}

谢谢！

【问题讨论】：

你应该发布 PHP 生成的 HTML 而不是发布 PHP 本身
im sry siguza 那只是生成我认为的 url ..

标签： css image twitter-bootstrap position

【解决方案1】：

为什么不尝试在您的 css 文件中使用 @media 查询。这是链接，参考this并尝试实现（http://www.w3schools.com/cssref/css3_pr_mediaquery.asp）

【讨论】：

先生还有其他建议吗？仍然没有任何线索

【解决方案2】：

要使图像具有响应性，请设置图像的max-width: 100% 和height: auto

【讨论】：