Question

图片：（https://i.stack.imgur.com/VAGy0.jpg）1
我所有的图片都有不同的尺寸（宽度/高度）
我想让所有图片都保持在div内{strong> fit＆Responsive 甚至width:100%+的大小，我可以使用overflow:hidden隐藏某些部分，但我希望保持不变{ {1}}，使其相等并仍然响应！，例如高度自动（height）
我想使用此代码height:auto
我不想使用/更改代码来设置<div><img src=".."/></div>的样式或任何background: url('..');或任何flex或使用任何javascript
图片：（https://i.stack.imgur.com/Ltuef.jpg）2
图片：（https://i.stack.imgur.com/7VFFP.jpg）3

object-fit:...;

body,
html {
  background: #9b9;
}

img {
  max-width: 100%;
  height: auto;
  width: auto;
  max-height: auto;
  position: relative;
  vertical-align: middle;
  left: 50%;
  transform: translate(-50%);
}

div {
  width: 20%;
  height: auto;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  display: inline-block;
}

Answer 1

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <layout>ZIP</layout>
                </configuration>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>

            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                    <useIncrementalCompilation>false</useIncrementalCompilation>
                    <includes>
                        <include>${basedir}/src/main/java/**/*.java</include>
                        <include>${basedir}/src/main/resources/lib/*.jar</include>
                    </includes>

                </configuration>
            </plugin>

body,
html {
  background: #9b9;
}

img {
  max-width: 100%;
  max-height: auto;
  position: relative;
  vertical-align: middle;
  left: 50%;
  transform: translate(-50%);
  height: 150px;
  width: 150px;
  object-fit:cover;
}

div {
  width: 20%;
  height: auto;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  display: inline-block;
}

如何在div内使所有图像适合/相同大小并响应

1 个答案: