Question

我是造型人物。

我想这样做，以便当图像小于文本列时，图形缩小到它的大小和中心，因为我正在使用：

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会做的

Answer 1

将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>

中心容器和使用负边距

1 个答案: