我是造型人物。
我想这样做,以便当图像小于文本列时,图形缩小到它的大小和中心,因为我正在使用:
div {
width: 20em;
margin: 0 auto;
background-color: #f8f8f8;
}
figure {
display: table;
margin: 1rem auto;
padding: 2rem 2rem;
background-color: #eee;
}
figure img {
max-width: 100%;
margin: 0 auto;
}
<div><figure>
<img src="https://placehold.it/100x100" alt="100x100 placeholder">
</figure>
<figure>
<img src="https://placehold.it/400x100" alt="400x100 placeholder">
</figure></div>
问题是,当图像是列的大小时,我希望图形在列外渗出。为此,我通常使用:
div {
width: 20em;
margin: 0 auto;
background-color: #f8f8f8;
}
figure {
display: table;
margin: 1rem -2rem;
padding: 2rem 2rem;
background-color: #eee;
}
figure img {
max-width: 100%;
margin: 0 auto;
}
<div><figure>
<img src="https://placehold.it/100x100" alt="100x100 placeholder">
</figure>
<figure>
<img src="https://placehold.it/400x100" alt="400x100 placeholder">
</figure></div>
但该解决方案会移除margin: auto;
居中
我很欣赏只有CSS的解决方案,但如果没有别的办法,js和jquery会做的
答案 0 :(得分:2)
将figure
设为inline-table
并将text-align:center
应用于父级。
body {
background: lightgreen;
}
div {
width: 20em;
margin: 0 auto;
background-color: #f8f8f8;
background: cornflowerblue;
text-align: center;
}
figure {
display: inline-table;
margin: 1rem -2rem;
padding: 2rem 2rem;
background-color: #eee;
}
figure img {
max-width: 100%;
margin: 0 auto;
}
<div>
<figure>
<img src="https://placehold.it/100x100" alt="100x100 placeholder">
</figure>
<figure>
<img src="https://placehold.it/400x100" alt="400x100 placeholder">
</figure>
</div>