twitter-bootstrap 如何使包含图像的 div 响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17836793/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a div responsive that contains an image
提问by InfusedNL
I am currently developing a responsive wordpress theme with bootstrap but I am stuck at the following problem that I have three div's next to each other with a featured image that fills the whole div.
我目前正在使用 bootstrap 开发响应式 wordpress 主题，但我遇到了以下问题，即我有三个 div 彼此相邻，并带有一个填充整个 div 的特色图像。
The featured image itself is already responsive but for some reason my div is not unless I use width: 33%; for the first and third div and width: 34%; for the second div. But when I do this I get a vertical line on the right of the third div of 1 pixel wide as those percentages together only fill up 1039 pixels together instead of 1040 pixels. Also using a span4 class on each div doesnt work either as it will create a big gap on the right side of the container.
特色图片本身已经具有响应性，但由于某种原因，除非我使用 width: 33%；否则我的 div 没有响应；对于第一个和第三个 div 和宽度：34%；对于第二个 div。但是当我这样做时，我会在第三个 1 像素宽的 div 右侧得到一条垂直线，因为这些百分比加在一起只填充了 1039 像素而不是 1040 像素。同样在每个 div 上使用 span4 类也不起作用，因为它会在容器的右侧产生很大的间隙。
So the wrapper is 1040pixels wide and contains three div's. And each div contains a featured image.
所以包装器宽 1040 像素，包含三个 div。每个 div 都包含一个特色图片。
What I want to achieve is that the three images stay next to eachother when scaling and that they only float above each other on the mobile version. But as it is now they instantly jump beneath each other when the page scales.
我想要实现的是，三个图像在缩放时彼此相邻，并且它们仅在移动版本上浮动。但就像现在一样，当页面缩放时，它们会立即跳到彼此下方。
You can visit the site at http://makramedia.beta-projects.nland on the homepage when you scroll down you will see those three images beneath the tab slideshow.
您可以在http://makramedia.beta-projects.nl上访问该站点，在主页上向下滚动时，您将在选项卡幻灯片下方看到这三个图像。
I really hope someone can help me out on this on. Many thanks in advance!
我真的希望有人能帮助我解决这个问题。提前谢谢了！
Your's sincerely,
此致，
Christiaan
克里斯蒂安
Here's my html markup:
这是我的 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>
And here's my CSS:
这是我的 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;
}
回答by WhitehatK
Change your CSS as follows to make div's responsive that contains an image :)
如下更改您的 CSS 以使包含图像的 div 具有响应性 :)
.news-img {
display: block;
position: relative;
width: auto;
height: auto;
margin-bottom: 20px;
}
img {
width: auto;
height: auto;
}
Use this code to align the 3 image blocks in one row
使用此代码将 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;
}
