Safari中的Flexbox图片差异

问题描述 投票：0回答：1

我尝试用一​​些图像和文本制作网格。

可以在后台设置图像。因此，我尝试使所有图像的高度相同。

这里是用于说明：]的代码笔>

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中，它运行良好。但是在野生动物园中，它被分解了，我不知道该如何解决。我尝试了一些东西，但没有定论。

我尝试在flexbox项上设置一些align-items：Stretch

，尝试使用开发人员工具，但找不到在Safari中解决此问题的方法。

也许我没有很好的“编码”，我不知道。但是它可以按照我想要的方式在Chrome / Firefox中运行。我看到的唯一解决方案是为图像设置align-self：center

。但这并不是我想要的。

尝试将所有图像设置为相同的高度甚至是个好主意吗？感谢object-fit：cover

？

我尝试用一​​些图像和文本制作网格。可以在后台设置图像。因此，我尝试使所有图像的高度相同。这是一个用于说明的codepen：img {max -...

css safari flexbox
1个回答
0
投票

您可以在grid-auto-rows类中使用.presses来设置所有网格行的相同height。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.