如何在没有内容延伸的情况下集中内容？

Posted 2021-04-21

我想将2张图像居中，但是因为显示而导致图像被拉伸不成比例：flex但是，如果没有它，内容将无法正常工作

是否存在另一种以图像为中心的解决方案？

<div class="column-photo">
<div class="center">
<img src="img/2.%20GenerationAnxiety%20page%202,2.png" 
style="width:40vw;">

<img src="img/3.%20GenerationAnxiety%20page%203,3.png" 
style="width:40vw;">
</div>


column-photo {
flex-wrap: wrap;
flex: 33.33%;

}

.center {
display: flex;
justify-content: center!important;
align-content: center!important;
}

答案

您已经错过了课堂专栏照片。

没有特定宽度的替代方式

.column-photo {
 text-align:center;
  display:block;
}
.center {
  display:inline-block;
  float:none;
}

另一答案

如果要拉伸图像但保持纵横比，则应将图像包装在具有单独宽度的div中。然后你可以给图像宽度100％以保持方面。

如果你应该在这种情况下使用vw是另一个问题

<div class="column-photo">
  <div class="center">
    <div class="img-container" style="width: 40vw">
      <img src="http://via.placeholder.com/350x150">
    </div>
    <div class="img-container" style="width: 40vw">
      <img src="http://via.placeholder.com/350x150">
    </div>
  </div>
</div>

img{
  width: 100%;
}

另一答案

看起来你搞砸了一些属性：

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="center">
  <img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg" style="width:10vw;">

  <img src="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg" style="width:20vw;">
</div>

以上是关于如何在没有内容延伸的情况下集中内容？的主要内容，如果未能解决你的问题，请参考以下文章

如何在没有 xib 文件的情况下集成 iAD

如何在没有片段的情况下使用导航抽屉？

Microsoft Cognitive Services Face API - 如何在没有可可豆荚的情况下集成 iOS 框架？

Wordpress：在没有插件的情况下集成 Mailchimp 错误请求 400 Ajax URL

在没有可可的情况下集成 Firebase 没有这样的模块“Firebase”？

Google Play Game Services 和 LibGDX，如何在不显示标题栏的情况下集成？