主页 / 问题 / 1284756
Accepted
Родион Поляков
Asked:2022-05-22 04:33:44 +0000 UTC2022-05-22 04:33:44 +0000 UTC

使图像适合块大小

  • 772

有类似的东西：

<div class="img-container">
    <img src="" class="">
</div>

如何确保img-container它始终是 1x1，同时容器中的图像始终完全居中（水平和垂直）？

例子：

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

css

1 个回答

  1. Best Answer

    为了保持 1:1 的纵横比，您需要一个父容器。并且图片的定位绝对是通过自动缩进和设置最大尺寸进行的：

    .container { 
  margin: 10px;
  width: 25%;
  float: left;
}

.img-container {
  position: relative;
  padding-top: calc(100% - 2 * 4px); /* отнимаем удвоеный размер рамки */
  box-sizing: border-box;
  border: 4px solid red; 
}

.img-container img {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto;
  max-width: 80%;
  max-height: 80%;
}
    <div class="container">
  <div class="img-container">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

<div class="container">
  <div class="img-container">
    <img src="https://picsum.photos/300/200">
  </div>
</div>  

<div class="container">
  <div class="img-container">
    <img src="https://picsum.photos/300/300">
  </div>
</div>

    • 0

相关问题