图片:(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;
}
答案 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;
}