Question

我找到了很多主题，但我还没有找到解决问题的方法。当使用来自lorempixel的图像src时，我的代码运行良好但是当使用图像本地（4000x3000）时，它不会调整大小以适应div。希望有人能帮助我。

我正在使用Bootstrap 3.1.1

HTML

<section class="portfolio">
    <div class="portfolio-list">
        <ul>
            <li>
                <div class="portfolio-box">
                <a href="#">
                    <img src="img/thumb-1.jpg" alt="Portfolio item">
                </a>
                </div>
            </li>
            <li>
                <div class="portfolio-box">
                <a href="#">
                    <img src="http://lorempixel.com/598/386/" alt="Portfolio item">
                </a>
                </div>
            </li>
            <li>
                <div class="portfolio-box">
                <a href="#">
                    <img src="http://lorempixel.com/598/386/" alt="Portfolio item">
                </a>
                </div>
            </li>
            <li>
                <div class="portfolio-box">
                <a href="#">
                    <img src="http://lorempixel.com/598/386/" alt="Portfolio item">
                </a>
                </div>
            </li>
            <li>
                <div class="portfolio-box">
                <a href="#">
                    <img src="http://lorempixel.com/598/386/" alt="Portfolio item">
                </a>
                </div>
            </li>
            <li>
                <div class="portfolio-box">
                <a href="#">
                    <img src="http://lorempixel.com/598/386/" alt="Portfolio item">
                </a>
                </div>
            </li>
        </ul>
    </div>  <!-- end portfolio-list -->
</section>  <!-- end portfolio -->

CSS

.portfolio-list{
    background-color: #cccccc;

    li{
        float: left;
        width: 33.33%;
        display: block;
    }
}

http://jsfiddle.net/2mbsb16m/

Answer 1

您应该将图像设置为父元素的宽度和高度。然后您可以将图像设置为宽度：100％：高度：自动;

.portfolio-box {
    width:300px;
    height:300px;
}

.portfolio-box img {
    width:100%;
    height:auto;
}

更新了小提琴：http://jsfiddle.net/donnellyjoe/2mbsb16m/2/

图像高分辨率不适合div调整大小

1 个答案: