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

时间:2018-11-25 09:24:38

标签: html css image css3

图片:(https://i.stack.imgur.com/VAGy0.jpg1
我所有的图片都有不同的尺寸(宽度/高度)
我想让所有图片都保持在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.jpg2
图片:(https://i.stack.imgur.com/7VFFP.jpg3

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;
}

1 个答案:

答案 0 :(得分:0)

<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;
}