【发布时间】：2020-04-09 18:57:09
【问题描述】：
我尝试用一些图像+文字制作一个网格。
可以在后台设置图像。所以我试着让所有的图片都一样高。
这是一个用于说明的代码笔：
img {
max-width: 100%;
object-fit: cover;
height: auto;
}
.presses {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-column-gap: 25px;
grid-row-gap: 80px;
}
@media only screen and (max-width: 1024px) {
.presses {
grid-row-gap: 40px;
}
}
.presses .geometric {
font-size: 0.5rem;
}
.presses .geometric--triangle {
font-size: 4rem;
}
.presses .geometric--1 {
top: 3%;
left: -3%;
}
.presses .geometric--2 {
left: 50%;
transform: translateX(-50%);
top: 25%;
}
.presses .geometric--3 {
right: -3%;
top: 6%;
}
.presses .geometric--4 {
top: 70%;
left: -2%;
}
.presses .geometric--5 {
top: 55%;
left: 13%;
}
.presses .geometric--6 {
top: 65%;
right: -5%;
}
.press {
display: flex;
flex-direction: column;
}
.press a {
text-decoration: none;
color: inherit;
}
.press ul,
.press li {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.press p {
margin: 0;
}
.press__thumbnail {
position: relative;
height: auto;
flex: 1;
display: inline-flex;
}
@media (hover: hover) {
.press__thumbnail:hover .press__thumbnail__cover {
opacity: 1;
}
}
.press__thumbnail__cover {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: rgba(64, 76, 88, 0.8);
transition: opacity 0.35s cubic-bezier(0.42, 0, 0.58, 1);
}
.press__thumbnail__cover svg path {
fill: #FFF;
}
.press__thumbnail__cover > span {
display: block;
color: #FFF;
font-size: 13px;
letter-spacing: 0;
font-weight: 600;
margin-top: 5px;
}
.press__thumbnail__cover svg {
width: 35px;
height: 35px;
}
.press__content {
margin-top: 0.9375em;
}
.press__title {
font-size: 1.08em;
}
.press__title {
display: block;
text-align: center;
text-transform: uppercase;
color: #404c58;
font-size: 1em;
letter-spacing: 0;
font-weight: 600;
}
.press__date {
display: block;
text-align: center;
text-transform: capitalize;
color: #404c58;
font-size: 13px;
letter-spacing: 0;
font-weight: 400;
margin-top: 0.5625em;
margin-bottom: 0.8125em;
}
.press__share {
display: flex;
justify-content: center;
text-align: center;
}
.press__share > span {
color: #404c58;
font-size: 0.93em;
font-weight: 700;
letter-spacing: 0;
}
.press__share ul {
margin-left: 0.625em;
}
.press__share ul > li {
display: inline-block;
}
.press__share ul > li:not(:last-child) {
margin-right: 0.3125em;
}
.press__share a {
display: block;
}
.press__share svg {
width: 0.9375em;
height: 0.9375em;
}
.press__share svg path,
.press__share svg polygon {
fill: #404c58;
transition: fill 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media (hover: hover) {
.press__share a:hover svg path,
.press__share a:hover svg polygon {
fill: blue;
}
}
.press-view-wrapper {
position: fixed;
padding: 30px;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 255, 0.8);
z-index: 99999999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
@media only screen and (max-width: 767px) {
.press-view-wrapper {
padding: 15px;
}
}
body.press-view--is-active {
overflow: hidden;
}
body.press-view--is-active .press-view-wrapper {
pointer-events: auto;
opacity: 1;
}
.press-view-wrapper__loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.press-view-wrapper__loading svg {
width: 150px;
height: 150px;
}
.press-view-wrapper__loading svg rect {
fill: #FFF;
}
.press-view-wrapper--video .video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.press-view-wrapper--video iframe,
.press-view-wrapper--video object,
.press-view-wrapper--video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.press-view-wrapper--press .press-view-wrapper__content {
width: 100%;
height: 100%;
max-width: 70vw;
position: relative;
}
@media only screen and (max-width: 479px) {
.press-view-wrapper--press .press-view-wrapper__content {
max-width: 100%;
}
}
.press-view-wrapper--video .press-view-wrapper__content {
width: 100%;
height: auto;
max-width: 700px;
}<div class="presses">
<div class="press" data-press-type="" data-press-link="">
<a target="_blank" href="" class="press__thumbnail">
<img src="https://picsum.photos/id/574/674/548" alt="alt test">
<span class="press__thumbnail__cover">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 512 512" enable-background="new 0 0 512 512"><path d="m220.2,388.7c-92.9,0-168.2-75.2-168.2-168.1s75.3-168.1 168.2-168.1 168.1,75.3 168.1,168.1-75.3,168.1-168.1,168.1zm274.8,78l-113.3-113.3c29.7-36.1 47.6-82.4 47.6-132.8 0-115.5-93.6-209.2-209.2-209.2s-209.1,93.7-209.1,209.2 93.6,209.2 209.2,209.2c50.4,0 96.6-17.8 132.7-47.5l113.3,113.3c5.2,5.3 21.1,7.9 28.9,0 7.9-8 7.9-20.9-0.1-28.9z"></path><path d="m289.8,200.2h-49.3v-49.3c0-11.3-9.1-20.4-20.4-20.4-11.3,0-20.4,9.1-20.4,20.4v49.3h-49.3c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h49.3v49.3c0,11.3 9.1,20.4 20.4,20.4 11.3,0 20.4-9.1 20.4-20.4v-49.3h49.3c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.2-20.4-20.4-20.4z"></path></svg>
<span>Voir</span>
</span>
</a>
<div class="press__content">
<a target="_blank" href="" class="press__title"><h2>Magazine le parisien</h2></a>
<a target="_blank" href="" class="press__date">janvier 1970</a>
<div class="press__share">
<span>Partagez :</span>
<ul>
<li><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u="><svg xmlns="http://www.w3.org/2000/svg" viewBox="88.428 12.828 107.543 207.085"><path d="M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z"></path></svg></a></li>
<li><a target="_blank" href="https://twitter.com/intent/tweet?text="><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><path d="M512,97.248c-19.04,8.352-39.328,13.888-60.48,16.576c21.76-12.992,38.368-33.408,46.176-58.016 c-20.288,12.096-42.688,20.64-66.56,25.408C411.872,60.704,384.416,48,354.464,48c-58.112,0-104.896,47.168-104.896,104.992 c0,8.32,0.704,16.32,2.432,23.936c-87.264-4.256-164.48-46.08-216.352-109.792c-9.056,15.712-14.368,33.696-14.368,53.056 c0,36.352,18.72,68.576,46.624,87.232c-16.864-0.32-33.408-5.216-47.424-12.928c0,0.32,0,0.736,0,1.152 c0,51.008,36.384,93.376,84.096,103.136c-8.544,2.336-17.856,3.456-27.52,3.456c-6.72,0-13.504-0.384-19.872-1.792 c13.6,41.568,52.192,72.128,98.08,73.12c-35.712,27.936-81.056,44.768-130.144,44.768c-8.608,0-16.864-0.384-25.12-1.44 C46.496,446.88,101.6,464,161.024,464c193.152,0,298.752-160,298.752-298.688c0-4.64-0.16-9.12-0.384-13.568 C480.224,136.96,497.728,118.496,512,97.248z"></path></svg></a></li>
</ul>
</div>
</div>
</div>
<div class="press" data-press-type="" data-press-link="">
<a target="_blank" href="" class="press__thumbnail">
<img src="https://picsum.photos/id/574/672/410" alt="alt test">
<span class="press__thumbnail__cover">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 512 512" enable-background="new 0 0 512 512"><path d="m220.2,388.7c-92.9,0-168.2-75.2-168.2-168.1s75.3-168.1 168.2-168.1 168.1,75.3 168.1,168.1-75.3,168.1-168.1,168.1zm274.8,78l-113.3-113.3c29.7-36.1 47.6-82.4 47.6-132.8 0-115.5-93.6-209.2-209.2-209.2s-209.1,93.7-209.1,209.2 93.6,209.2 209.2,209.2c50.4,0 96.6-17.8 132.7-47.5l113.3,113.3c5.2,5.3 21.1,7.9 28.9,0 7.9-8 7.9-20.9-0.1-28.9z"></path><path d="m289.8,200.2h-49.3v-49.3c0-11.3-9.1-20.4-20.4-20.4-11.3,0-20.4,9.1-20.4,20.4v49.3h-49.3c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h49.3v49.3c0,11.3 9.1,20.4 20.4,20.4 11.3,0 20.4-9.1 20.4-20.4v-49.3h49.3c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.2-20.4-20.4-20.4z"></path></svg>
<span>Voir</span>
</span>
</a>
<div class="press__content">
<a target="_blank" href="" class="press__title"><h2>Magazine le parisien</h2></a>
<a target="_blank" href="" class="press__date">janvier 1970</a>
<div class="press__share">
<span>Partagez :</span>
<ul>
<li><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u="><svg xmlns="http://www.w3.org/2000/svg" viewBox="88.428 12.828 107.543 207.085"><path d="M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z"></path></svg></a></li>
<li><a target="_blank" href="https://twitter.com/intent/tweet?text="><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><path d="M512,97.248c-19.04,8.352-39.328,13.888-60.48,16.576c21.76-12.992,38.368-33.408,46.176-58.016 c-20.288,12.096-42.688,20.64-66.56,25.408C411.872,60.704,384.416,48,354.464,48c-58.112,0-104.896,47.168-104.896,104.992 c0,8.32,0.704,16.32,2.432,23.936c-87.264-4.256-164.48-46.08-216.352-109.792c-9.056,15.712-14.368,33.696-14.368,53.056 c0,36.352,18.72,68.576,46.624,87.232c-16.864-0.32-33.408-5.216-47.424-12.928c0,0.32,0,0.736,0,1.152 c0,51.008,36.384,93.376,84.096,103.136c-8.544,2.336-17.856,3.456-27.52,3.456c-6.72,0-13.504-0.384-19.872-1.792 c13.6,41.568,52.192,72.128,98.08,73.12c-35.712,27.936-81.056,44.768-130.144,44.768c-8.608,0-16.864-0.384-25.12-1.44 C46.496,446.88,101.6,464,161.024,464c193.152,0,298.752-160,298.752-298.688c0-4.64-0.16-9.12-0.384-13.568 C480.224,136.96,497.728,118.496,512,97.248z"></path></svg></a></li>
</ul>
</div>
</div>
</div>
<div class="press" data-press-type="" data-press-link="">
<a target="_blank" href="" class="press__thumbnail">
<img src="https://picsum.photos/id/574/674/548" alt="alt test">
<span class="press__thumbnail__cover">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 512 512" enable-background="new 0 0 512 512"><path d="m220.2,388.7c-92.9,0-168.2-75.2-168.2-168.1s75.3-168.1 168.2-168.1 168.1,75.3 168.1,168.1-75.3,168.1-168.1,168.1zm274.8,78l-113.3-113.3c29.7-36.1 47.6-82.4 47.6-132.8 0-115.5-93.6-209.2-209.2-209.2s-209.1,93.7-209.1,209.2 93.6,209.2 209.2,209.2c50.4,0 96.6-17.8 132.7-47.5l113.3,113.3c5.2,5.3 21.1,7.9 28.9,0 7.9-8 7.9-20.9-0.1-28.9z"></path><path d="m289.8,200.2h-49.3v-49.3c0-11.3-9.1-20.4-20.4-20.4-11.3,0-20.4,9.1-20.4,20.4v49.3h-49.3c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h49.3v49.3c0,11.3 9.1,20.4 20.4,20.4 11.3,0 20.4-9.1 20.4-20.4v-49.3h49.3c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.2-20.4-20.4-20.4z"></path></svg>
<span>Voir</span>
</span>
</a>
<div class="press__content">
<a target="_blank" href="" class="press__title"><h2>Magazine le parisien</h2></a>
<a target="_blank" href="" class="press__date">janvier 1970</a>
<div class="press__share">
<span>Partagez :</span>
<ul>
<li><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u="><svg xmlns="http://www.w3.org/2000/svg" viewBox="88.428 12.828 107.543 207.085"><path d="M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z"></path></svg></a></li>
<li><a target="_blank" href="https://twitter.com/intent/tweet?text="><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><path d="M512,97.248c-19.04,8.352-39.328,13.888-60.48,16.576c21.76-12.992,38.368-33.408,46.176-58.016 c-20.288,12.096-42.688,20.64-66.56,25.408C411.872,60.704,384.416,48,354.464,48c-58.112,0-104.896,47.168-104.896,104.992 c0,8.32,0.704,16.32,2.432,23.936c-87.264-4.256-164.48-46.08-216.352-109.792c-9.056,15.712-14.368,33.696-14.368,53.056 c0,36.352,18.72,68.576,46.624,87.232c-16.864-0.32-33.408-5.216-47.424-12.928c0,0.32,0,0.736,0,1.152 c0,51.008,36.384,93.376,84.096,103.136c-8.544,2.336-17.856,3.456-27.52,3.456c-6.72,0-13.504-0.384-19.872-1.792 c13.6,41.568,52.192,72.128,98.08,73.12c-35.712,27.936-81.056,44.768-130.144,44.768c-8.608,0-16.864-0.384-25.12-1.44 C46.496,446.88,101.6,464,161.024,464c193.152,0,298.752-160,298.752-298.688c0-4.64-0.16-9.12-0.384-13.568 C480.224,136.96,497.728,118.496,512,97.248z"></path></svg></a></li>
</ul>
</div>
</div>
</div>
<div class="press" data-press-type="" data-press-link="">
<a target="_blank" href="" class="press__thumbnail">
<img src="https://picsum.photos/id/574/672/410" alt="alt test">
<span class="press__thumbnail__cover">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 512 512" enable-background="new 0 0 512 512"><path d="m220.2,388.7c-92.9,0-168.2-75.2-168.2-168.1s75.3-168.1 168.2-168.1 168.1,75.3 168.1,168.1-75.3,168.1-168.1,168.1zm274.8,78l-113.3-113.3c29.7-36.1 47.6-82.4 47.6-132.8 0-115.5-93.6-209.2-209.2-209.2s-209.1,93.7-209.1,209.2 93.6,209.2 209.2,209.2c50.4,0 96.6-17.8 132.7-47.5l113.3,113.3c5.2,5.3 21.1,7.9 28.9,0 7.9-8 7.9-20.9-0.1-28.9z"></path><path d="m289.8,200.2h-49.3v-49.3c0-11.3-9.1-20.4-20.4-20.4-11.3,0-20.4,9.1-20.4,20.4v49.3h-49.3c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h49.3v49.3c0,11.3 9.1,20.4 20.4,20.4 11.3,0 20.4-9.1 20.4-20.4v-49.3h49.3c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.2-20.4-20.4-20.4z"></path></svg>
<span>Voir</span>
</span>
</a>
<div class="press__content">
<a target="_blank" href="" class="press__title"><h2>Magazine le parisien</h2></a>
<a target="_blank" href="" class="press__date">janvier 1970</a>
<div class="press__share">
<span>Partagez :</span>
<ul>
<li><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u="><svg xmlns="http://www.w3.org/2000/svg" viewBox="88.428 12.828 107.543 207.085"><path d="M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z"></path></svg></a></li>
<li><a target="_blank" href="https://twitter.com/intent/tweet?text="><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><path d="M512,97.248c-19.04,8.352-39.328,13.888-60.48,16.576c21.76-12.992,38.368-33.408,46.176-58.016 c-20.288,12.096-42.688,20.64-66.56,25.408C411.872,60.704,384.416,48,354.464,48c-58.112,0-104.896,47.168-104.896,104.992 c0,8.32,0.704,16.32,2.432,23.936c-87.264-4.256-164.48-46.08-216.352-109.792c-9.056,15.712-14.368,33.696-14.368,53.056 c0,36.352,18.72,68.576,46.624,87.232c-16.864-0.32-33.408-5.216-47.424-12.928c0,0.32,0,0.736,0,1.152 c0,51.008,36.384,93.376,84.096,103.136c-8.544,2.336-17.856,3.456-27.52,3.456c-6.72,0-13.504-0.384-19.872-1.792 c13.6,41.568,52.192,72.128,98.08,73.12c-35.712,27.936-81.056,44.768-130.144,44.768c-8.608,0-16.864-0.384-25.12-1.44 C46.496,446.88,101.6,464,161.024,464c193.152,0,298.752-160,298.752-298.688c0-4.64-0.16-9.12-0.384-13.568 C480.224,136.96,497.728,118.496,512,97.248z"></path></svg></a></li>
</ul>
</div>
</div>
</div>
<div class="press" data-press-type="" data-press-link="">
<a target="_blank" href="" class="press__thumbnail">
<img src="https://picsum.photos/id/574/674/548" alt="alt test">
<span class="press__thumbnail__cover">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 512 512" enable-background="new 0 0 512 512"><path d="m220.2,388.7c-92.9,0-168.2-75.2-168.2-168.1s75.3-168.1 168.2-168.1 168.1,75.3 168.1,168.1-75.3,168.1-168.1,168.1zm274.8,78l-113.3-113.3c29.7-36.1 47.6-82.4 47.6-132.8 0-115.5-93.6-209.2-209.2-209.2s-209.1,93.7-209.1,209.2 93.6,209.2 209.2,209.2c50.4,0 96.6-17.8 132.7-47.5l113.3,113.3c5.2,5.3 21.1,7.9 28.9,0 7.9-8 7.9-20.9-0.1-28.9z"></path><path d="m289.8,200.2h-49.3v-49.3c0-11.3-9.1-20.4-20.4-20.4-11.3,0-20.4,9.1-20.4,20.4v49.3h-49.3c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h49.3v49.3c0,11.3 9.1,20.4 20.4,20.4 11.3,0 20.4-9.1 20.4-20.4v-49.3h49.3c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.2-20.4-20.4-20.4z"></path></svg>
<span>Voir</span>
</span>
</a>
<div class="press__content">
<a target="_blank" href="" class="press__title"><h2>Magazine le parisien</h2></a>
<a target="_blank" href="" class="press__date">janvier 1970</a>
<div class="press__share">
<span>Partagez :</span>
<ul>
<li><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u="><svg xmlns="http://www.w3.org/2000/svg" viewBox="88.428 12.828 107.543 207.085"><path d="M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z"></path></svg></a></li>
<li><a target="_blank" href="https://twitter.com/intent/tweet?text="><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><path d="M512,97.248c-19.04,8.352-39.328,13.888-60.48,16.576c21.76-12.992,38.368-33.408,46.176-58.016 c-20.288,12.096-42.688,20.64-66.56,25.408C411.872,60.704,384.416,48,354.464,48c-58.112,0-104.896,47.168-104.896,104.992 c0,8.32,0.704,16.32,2.432,23.936c-87.264-4.256-164.48-46.08-216.352-109.792c-9.056,15.712-14.368,33.696-14.368,53.056 c0,36.352,18.72,68.576,46.624,87.232c-16.864-0.32-33.408-5.216-47.424-12.928c0,0.32,0,0.736,0,1.152 c0,51.008,36.384,93.376,84.096,103.136c-8.544,2.336-17.856,3.456-27.52,3.456c-6.72,0-13.504-0.384-19.872-1.792 c13.6,41.568,52.192,72.128,98.08,73.12c-35.712,27.936-81.056,44.768-130.144,44.768c-8.608,0-16.864-0.384-25.12-1.44 C46.496,446.88,101.6,464,161.024,464c193.152,0,298.752-160,298.752-298.688c0-4.64-0.16-9.12-0.384-13.568 C480.224,136.96,497.728,118.496,512,97.248z"></path></svg></a></li>
</ul>
</div>
</div>
</div>
<div class="press" data-press-type="" data-press-link="">
<a target="_blank" href="" class="press__thumbnail">
<img src="https://picsum.photos/id/574/672/410" alt="alt test">
<span class="press__thumbnail__cover">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 512 512" enable-background="new 0 0 512 512"><path d="m220.2,388.7c-92.9,0-168.2-75.2-168.2-168.1s75.3-168.1 168.2-168.1 168.1,75.3 168.1,168.1-75.3,168.1-168.1,168.1zm274.8,78l-113.3-113.3c29.7-36.1 47.6-82.4 47.6-132.8 0-115.5-93.6-209.2-209.2-209.2s-209.1,93.7-209.1,209.2 93.6,209.2 209.2,209.2c50.4,0 96.6-17.8 132.7-47.5l113.3,113.3c5.2,5.3 21.1,7.9 28.9,0 7.9-8 7.9-20.9-0.1-28.9z"></path><path d="m289.8,200.2h-49.3v-49.3c0-11.3-9.1-20.4-20.4-20.4-11.3,0-20.4,9.1-20.4,20.4v49.3h-49.3c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h49.3v49.3c0,11.3 9.1,20.4 20.4,20.4 11.3,0 20.4-9.1 20.4-20.4v-49.3h49.3c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.2-20.4-20.4-20.4z"></path></svg>
<span>Voir</span>
</span>
</a>
<div class="press__content">
<a target="_blank" href="" class="press__title"><h2>Magazine le parisien</h2></a>
<a target="_blank" href="" class="press__date">janvier 1970</a>
<div class="press__share">
<span>Partagez :</span>
<ul>
<li><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u="><svg xmlns="http://www.w3.org/2000/svg" viewBox="88.428 12.828 107.543 207.085"><path d="M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z"></path></svg></a></li>
<li><a target="_blank" href="https://twitter.com/intent/tweet?text="><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><path d="M512,97.248c-19.04,8.352-39.328,13.888-60.48,16.576c21.76-12.992,38.368-33.408,46.176-58.016 c-20.288,12.096-42.688,20.64-66.56,25.408C411.872,60.704,384.416,48,354.464,48c-58.112,0-104.896,47.168-104.896,104.992 c0,8.32,0.704,16.32,2.432,23.936c-87.264-4.256-164.48-46.08-216.352-109.792c-9.056,15.712-14.368,33.696-14.368,53.056 c0,36.352,18.72,68.576,46.624,87.232c-16.864-0.32-33.408-5.216-47.424-12.928c0,0.32,0,0.736,0,1.152 c0,51.008,36.384,93.376,84.096,103.136c-8.544,2.336-17.856,3.456-27.52,3.456c-6.72,0-13.504-0.384-19.872-1.792 c13.6,41.568,52.192,72.128,98.08,73.12c-35.712,27.936-81.056,44.768-130.144,44.768c-8.608,0-16.864-0.384-25.12-1.44 C46.496,446.88,101.6,464,161.024,464c193.152,0,298.752-160,298.752-298.688c0-4.64-0.16-9.12-0.384-13.568 C480.224,136.96,497.728,118.496,512,97.248z"></path></svg></a></li>
</ul>
</div>
</div>
</div>
<div class="press" data-press-type="" data-press-link="">
<a target="_blank" href="" class="press__thumbnail">
<img src="https://picsum.photos/id/574/674/548" alt="alt test">
<span class="press__thumbnail__cover">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 512 512" enable-background="new 0 0 512 512"><path d="m220.2,388.7c-92.9,0-168.2-75.2-168.2-168.1s75.3-168.1 168.2-168.1 168.1,75.3 168.1,168.1-75.3,168.1-168.1,168.1zm274.8,78l-113.3-113.3c29.7-36.1 47.6-82.4 47.6-132.8 0-115.5-93.6-209.2-209.2-209.2s-209.1,93.7-209.1,209.2 93.6,209.2 209.2,209.2c50.4,0 96.6-17.8 132.7-47.5l113.3,113.3c5.2,5.3 21.1,7.9 28.9,0 7.9-8 7.9-20.9-0.1-28.9z"></path><path d="m289.8,200.2h-49.3v-49.3c0-11.3-9.1-20.4-20.4-20.4-11.3,0-20.4,9.1-20.4,20.4v49.3h-49.3c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h49.3v49.3c0,11.3 9.1,20.4 20.4,20.4 11.3,0 20.4-9.1 20.4-20.4v-49.3h49.3c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.2-20.4-20.4-20.4z"></path></svg>
<span>Voir</span>
</span>
</a>
<div class="press__content">
<a target="_blank" href="" class="press__title"><h2>Magazine le parisien</h2></a>
<a target="_blank" href="" class="press__date">janvier 1970</a>
<div class="press__share">
<span>Partagez :</span>
<ul>
<li><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u="><svg xmlns="http://www.w3.org/2000/svg" viewBox="88.428 12.828 107.543 207.085"><path d="M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z"></path></svg></a></li>
<li><a target="_blank" href="https://twitter.com/intent/tweet?text="><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><path d="M512,97.248c-19.04,8.352-39.328,13.888-60.48,16.576c21.76-12.992,38.368-33.408,46.176-58.016 c-20.288,12.096-42.688,20.64-66.56,25.408C411.872,60.704,384.416,48,354.464,48c-58.112,0-104.896,47.168-104.896,104.992 c0,8.32,0.704,16.32,2.432,23.936c-87.264-4.256-164.48-46.08-216.352-109.792c-9.056,15.712-14.368,33.696-14.368,53.056 c0,36.352,18.72,68.576,46.624,87.232c-16.864-0.32-33.408-5.216-47.424-12.928c0,0.32,0,0.736,0,1.152 c0,51.008,36.384,93.376,84.096,103.136c-8.544,2.336-17.856,3.456-27.52,3.456c-6.72,0-13.504-0.384-19.872-1.792 c13.6,41.568,52.192,72.128,98.08,73.12c-35.712,27.936-81.056,44.768-130.144,44.768c-8.608,0-16.864-0.384-25.12-1.44 C46.496,446.88,101.6,464,161.024,464c193.152,0,298.752-160,298.752-298.688c0-4.64-0.16-9.12-0.384-13.568 C480.224,136.96,497.728,118.496,512,97.248z"></path></svg></a></li>
</ul>
</div>
</div>
</div>
</div>https://codepen.io/th-o-benoit/pen/wvBoEgd
如您所见，在 Chrome 和 Firefox 中它运行良好。但是在 Safari 中它被破坏了，我不知道如何解决这个问题。我尝试了一些东西，但没有任何结论。
我尝试在 flexbox 项目上设置一些 align-items:stretch，尝试使用开发人员工具，但在 Safari 中找不到解决此问题的方法。
也许我没有很好地“编码”它，我不知道。但它在 Chrome/Firefox 中以我想要的方式工作。 我看到的唯一解决方案是将 align-self: center 设置为图像。但这并不是我想要的。
尝试使所有图像的高度相同是不是一个好主意？感谢 object-fit: cover ?
【问题讨论】：