背景封面仍然使图像太大
background cover still leaves images too big
我正在尝试为我的投资组合显示一堆徽标。我有 9 个不同大小的不同徽标,但它们不适合 div 框。我虽然 background-size: cover 可以修复它,但有些东西刚刚关闭。有人能给我指出正确的方向,让这些图像适当缩小,这样就不会剪掉徽标吗?
html:
<div class="page-wrapper__content">
<h2 class="page-wrapper__heading">Projects and Skills</h2>
<p class="page-wrapper__description">hey</p>
<div class="imagebox">
<div class="logorow">
<div class="logo html"></div>
<div class="logo css"></div>
<div class="logo javascript"></div>
</div>
<div class="logorow">
<div class="logo jquery"></div>
<div class="logo bootstrap"></div>
<div class="logo sass"></div>
</div>
<div class="logorow">
<div class="logo python"></div>
<div class="logo django"></div>
<div class="logo github"></div>
</div>
</div>
</div>
css:
.page-wrapper__content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 0 30%;
color: #fff; //white
transform: skewX(18deg);
transition: transform 1s, opacity 1s;
background-size: cover;
}
.imagebox {
border: 3px solid red;
width: 100%;
height: 33%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
.logorow {
display: flex;
flex-wrap: nowrap;
border: 1px solid yellow;
height: 33%;
width: 100%;
}
.logo {
background-size: cover;
border: 1px solid purple;
height: 100%;
width: 100%;
}
.html {
background-image: url('../images/html5.png');
}
只需使用 background-size:contain;
而不是 cover
。
contain
,根据MDN docs:
A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.
我正在尝试为我的投资组合显示一堆徽标。我有 9 个不同大小的不同徽标,但它们不适合 div 框。我虽然 background-size: cover 可以修复它,但有些东西刚刚关闭。有人能给我指出正确的方向,让这些图像适当缩小,这样就不会剪掉徽标吗?
html:
<div class="page-wrapper__content">
<h2 class="page-wrapper__heading">Projects and Skills</h2>
<p class="page-wrapper__description">hey</p>
<div class="imagebox">
<div class="logorow">
<div class="logo html"></div>
<div class="logo css"></div>
<div class="logo javascript"></div>
</div>
<div class="logorow">
<div class="logo jquery"></div>
<div class="logo bootstrap"></div>
<div class="logo sass"></div>
</div>
<div class="logorow">
<div class="logo python"></div>
<div class="logo django"></div>
<div class="logo github"></div>
</div>
</div>
</div>
css:
.page-wrapper__content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 0 30%;
color: #fff; //white
transform: skewX(18deg);
transition: transform 1s, opacity 1s;
background-size: cover;
}
.imagebox {
border: 3px solid red;
width: 100%;
height: 33%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
.logorow {
display: flex;
flex-wrap: nowrap;
border: 1px solid yellow;
height: 33%;
width: 100%;
}
.logo {
background-size: cover;
border: 1px solid purple;
height: 100%;
width: 100%;
}
.html {
background-image: url('../images/html5.png');
}
只需使用 background-size:contain;
而不是 cover
。
contain
,根据MDN docs:
A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.