我有一个带有儿童inide的flex容器(这些卡片里面有图像)。
仅在Safari上,其中一张卡片的图片已被拉伸-请在下面查看。
当我使用开发工具在chrome和firefox中查看它时,它看起来非常完美。
您知道什么会仅导致野生动物园出现此问题吗?我将在下面粘贴相关代码。
<div class="tool-title-container">
<h3 class="tool-title">Front end</h3>
<div class="tool-title-background"></div>
</div>
<div class="tool-logos">
<div class="tools-card">
<div class="tool-imgs-container">
<img src="imgs/html-css-js-logo.png" alt="html-css-js-logo" />
</div>
</div>
<div class="tools-card">
<div class="tool-imgs-container">
<img src="imgs/react-logo.png" alt="react-logo" />
</div>
</div>
<div class="tools-card">
<div class="tool-imgs-container">
<img src="imgs/material-ui-logo.png" alt="material-ui-logo" />
</div>
</div>
</div>
.tool-title-container {
position: relative;
}
.tool-title-background {
position: absolute;
max-width: 15rem;
height: 50%;
background: var(--primary-brand);
opacity: 0.3;
z-index: -1;
top: 0.5rem;
transform: var(--random-deg);
}
.tool-title {
font-size: 2rem;
font-weight: 300;
color: var(--text-primary)
}
.tools-card {
box-shadow: var(--box-shadow-lg);
display: block;
flex-wrap: wrap;
justify-content: space-evenly;
padding: 0.5rem 0.5rem;
border-radius: 32px;
margin: 1rem auto;
transition: transform 300ms ease-in-out;
border: 1px solid var(--dark-border);
margin: 1rem;
background: var(--white);
}
.tools-card:hover {
transform: translateY(-1rem);
transition: 300ms;
}
.tool-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.tool-imgs-container {
display: flex;
justify-content: space-evenly;
padding: 0.5rem;
background: var(--white);
}
.tool-imgs-container img {
max-width: 12rem;
}
答案 0 :(得分:1)
添加
.tool-imgs-container {
align-items: flex-start
}
由于align-items
的默认值为stretch
。
.tool-title-container {
position: relative;
}
.tool-title-background {
position: absolute;
max-width: 15rem;
height: 50%;
background: var(--primary-brand);
opacity: 0.3;
z-index: -1;
top: 0.5rem;
transform: var(--random-deg);
}
.tool-title {
font-size: 2rem;
font-weight: 300;
color: var(--text-primary)
}
.tools-card {
box-shadow: var(--box-shadow-lg);
display: block;
flex-wrap: wrap;
justify-content: space-evenly;
padding: 0.5rem 0.5rem;
border-radius: 32px;
margin: 1rem auto;
transition: transform 300ms ease-in-out;
border: 1px solid var(--dark-border);
margin: 1rem;
background: var(--white);
}
.tools-card:hover {
transform: translateY(-1rem);
transition: 300ms;
}
.tool-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.tool-imgs-container {
display: flex;
justify-content: space-evenly;
padding: 0.5rem;
background: var(--white);
align-items: flex-start;
}
.tool-imgs-container img {
max-width: 12rem;
}
<div class="tool-logos">
<div class="tools-card">
<div class="tool-imgs-container">
<img src="https://i.imgur.com/RBiHov0.jpeg" alt="html-css-js-logo" />
</div>
</div>
<div class="tools-card">
<div class="tool-imgs-container">
<img src="https://i.imgur.com/RBiHov0.jpeg" alt="react-logo" />
</div>
</div>
<div class="tools-card">
<div class="tool-imgs-container">
<img src="https://i.imgur.com/RBiHov0.jpeg" alt="material-ui-logo" />
</div>
</div>
</div>