如何使包含图像的 div 响应

Question

我目前正在开发一个带有引导程序的响应式 wordpress 主题，但我遇到了以下问题，即我有三个彼此相邻的 div，其中一个特色图像填满了整个 div。

特色图片本身已经响应，但由于某种原因我的 div 不是，除非我使用 width: 33%;对于第一个和第三个 div 和宽度：34%；对于第二个 div。但是当我这样做时，我在第三个 div 的右侧得到一条 1 像素宽的垂直线，因为这些百分比加起来只填充了 1039 像素而不是 1040 像素。同样在每个 div 上使用 span4 类也不起作用，因为它会在容器的右侧产生很大的间隙。

所以包装器是 1040 像素宽并包含三个 div。每个 div 都包含一张特色图片。

我想要实现的是，三个图像在缩放时保持彼此相邻，并且它们仅在移动版本上浮动。但就像现在一样，当页面缩放时，它们会立即跳到彼此下方。

您可以通过http://makramedia.beta-projects.nl 访问该网站，当您向下滚动时，您会在主页上看到标签幻灯片下方的这三张图片。

我真的希望有人可以帮助我解决这个问题。 非常感谢！

真诚的，

克里斯蒂安

这是我的 html 标记：

<section id="project-section" class="row-fluid content" role="main">
    <?php global $query_string; // required ?>
    <?php query_posts('category_name=projecten&showposts=3&order=DESC'); ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="project">
        <a href="<?php echo get_permalink(); ?>">
            <img class="project-icon" src="<?php bloginfo('template_directory') ?>/img/project-icon.png">
            <?php if ( has_post_thumbnail() ) {          
                the_post_thumbnail('projecten3-thumb', array( 'class' => "project-img"));
            } ?>
        </a>
    </div>
        <?php endwhile; else: ?>
            <p>There are currently no news items availlable.</p>
        <?php endif; ?>
        <?php wp_reset_query(); ?>
    <div class="clearfloat"></div>
</section>

这是我的 CSS：

#project-section {
    position: relative;
    display: block;
    height: auto;
    max-width: 1040px;
    margin: 0;
    padding: 0;
    background: #111421;
    overflow: hidden !important;
}

.project {
    display: inline-block;
    position: relative;
    float: left;
    width: 100%;
    max-width: 347px;
    max-height: 213px;
    margin: 0;
    padding: 0;
    background: #afafaf;
    overflow: hidden;
}

    .project:nth-child(2) {
        max-width: 346px !important;
    }

.project-img {
    max-width: 100% !important;
    height: auto;
}

.project-icon {
    display: block;
    position: absolute;
    left: -35px;
    margin-top: 80px;
    margin-left: 50%;
    opacity: .8;
    /*transform*/
    -webkit-transform:scale(.9);
    -moz-transform:scale(.9);
    -ms-transform:scale(.9);
    -o-transform:scale(.9);
    transform:scale(.9);
    /*transition*/
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

    #project-section .project:hover .project-icon {
            opacity: 1;
            /*transform*/
            -webkit-transform:scale(1);
            -moz-transform:scale(1);
            -ms-transform:scale(1);
            -o-transform:scale(1);
            transform:scale(1);
            /*transition*/
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
    }

Answer 1

如下更改你的 CSS 以使 div 的响应式包含图像:)

.news-img {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    margin-bottom: 20px;
}

img {
    width: auto;
    height: auto;   
}

使用此代码将 3 个图像块对齐在一行中

.project {
    display: inline-block;
    position: relative;
    float: left;
    width: 33.365%;
    max-width: 336px;
    max-height: 213px;
    margin: 5px !important;
    padding: 0px;
    background: #afafaf;
    overflow: hidden;
}