Question

我正在尝试对本网站的一部分进行布局，以便当窗口变宽/变窄时，图像会在各自的框中自动缩放，以保持其原始纵横比。

您可以在 codepen 或下面看到我的代码，我尝试将图像放入 DIV，在网格布局中移动 div，并将图像设置为使用 width: 100, height: 100; imagefill: cover; 但它似乎没有效果，在将图像封装在 div 中时，它在以前的代码块上对我有用，我很难找到这次到底出了什么问题......有关如何使其工作的建议？

https://codepen.io/roomwillow/pen/YzNKQwO

HTML：

<div class="marketsContainerGrid">
    <h2 id="marketsHeader">Markets Served</h2>
    <div class="marketsChildGrid">
        <div class="marketObjects" id="marketObject1">
            <img class="servicesImages" src="https://placem.at/places?h=600">
            <h3>Box 1</h3>
        </div>
        <div class="marketObjects" id="marketObject2">
            <img class="servicesImages" src="https://placem.at/places?h=400">
            <h3>Box 2</h3>
        </div>
        <div class="marketObjects" id="marketObject3">
            <img class="servicesImages" src="https://placem.at/places?h=500">
            <h3>Box 3</h3>
        </div>
        <div class="marketObjects" id="marketObject4">
            <img class="servicesImages" src="https://placem.at/places?w=500">
            <h3>Box 4</h3>
        </div>
        <div class="marketObjects" id="marketObject5">
            <img class="servicesImages" src="https://placem.at/places?w=1800">
            <h3>Box 5</h3>
        </div>
        <div class="marketObjects" id="marketObject6">
            <img class="servicesImages" src="https://placem.at/places?h=1400">
            <h3>Box 6</h3>
        </div>
        <div class="marketObjects" id="marketObject7">
            <img class="servicesImages" src="https://placem.at/places?h=1800">
            <h3>Box 7</h3>
        </div>
        <div class="marketObjects" id="marketObject8">
            <img class="servicesImages" src="https://placem.at/places?h=600">
            <h3>Box 8</h3>
        </div>
        <div class="marketObjects" id="marketObject9">
            <img class="servicesImages" src="">
            <h3>Box 9</h3>
        </div>
        <div class="marketObjects" id="marketObject10">
            <img class="servicesImages" src="">
            <h3>Box 10</h3>
        </div>
        <div class="marketObjects" id="marketObject11">
            <img class="servicesImages" src="">
            <h3>Box 11</h3>
        </div>
        <div class="marketObjects" id="marketObject12">
            <img class="servicesImages" src="">
            <h3>Box 12</h3>
        </div>
        <div class="marketObjects" id="marketObject13">
            <img class="servicesImages" src="">
            <h3>Box 13</h3>
        </div>
        <div class="marketObjects" id="marketObject14">
            <img class="servicesImages" src="">
            <h3>Box 14</h3>
        </div>
        <div class="marketObjects" id="marketObject15">
            <img>
            <h3>Don't See What Your Looking For?</h3>
            <p>Reach out, and we'll see how best our services can help acheive your goals!</p>
            <a class="button1" id="servicesContactButton" href="#">Contact Us</a>
        </div>
    </div>
</div>

CSS：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/*Text*/
h1{
    font-weight: bold;
    font-size: 22pt;
}
h2 {
  font-weight: bold;
  letter-spacing: 0.01em;
  font-size: 2.5rem;
  margin: 0;
}
h3 {
  font-weight: bold;
  font-size: 18pt;
  line-height: 30px;
  margin: 0;
}
p {
  font-size: 1.08rem;
    letter-spacing: 0.02em;
    font-weight: 100;
    margin: 0;
}
body {
  font-family: Arial, Helvetica, sans serif;
  color: white;
}

/* Black on White */
.button1 {
  padding: 0.5rem 1rem 0.5rem 1rem;
  border: solid white 1px;
  display: inline-block;
  text-decoration: none;
  color: white;
}
.button1:hover {
  background-color: white;
  color: black;
}

/* White on Black */
.button2 {
  padding: 0.5rem 1rem 0.5rem 1rem;
  border: solid black 2px;
  display: inline-block;
  text-decoration: none;
  color: black;
}
.button2:hover {
  background-color: black;
    color: white;
}





/* Markets */
.marketsContainerGrid {
    display: grid;
    grid-template-rows: 7rem auto;
}
#marketsHeader {
    color: black;
    justify-self: center;
    align-self: center;
}
.marketsChildGrid {
    grid-area: 2 / 1 / 3 / 2;
    display: grid;
    grid-template-rows: 17.5rem 5rem 2.5rem 12.5rem 2.5rem 17.5rem;
    grid-template-columns: 20% 20% 20% 20% 20%;
}
.marketObjects {
    background-color: black;
    overflow: hidden;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 100%;
}
.servicesImages {
    grid-area: 1 / 1 / 2 / 2;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    objectfit: cover;
    opacity: 85%;
    align-self: center;
    justify-self: center;
}
.marketObjects:hover img {
    transition: opacity 0.5s, width 1s, height 1s;
    opacity: 100%;
    width: 105%;
    height: 105%;
}
.marketObjects h3 {
    grid-area: 1 / 1 / 2 / 2;
    padding: 0.5rem 1rem;
    margin-left: 1rem;
    margin-bottom: 1rem;
    align-self: end;
    background-color: black;
    justify-self: start;
    z-index: 2;
}
#marketObject1 {
    grid-area: 1 / 1 / 2 / 2;
}
#marketObject2 {
    grid-area: 2 / 1 / 6 / 2;
}
#marketObject3 {
    grid-area: 6 / 1 / 7 / 2;
}
#marketObject4 {
    grid-area: 1 / 2 / 3 / 3;
}
#marketObject5 {
    grid-area: 3 / 2 / 5 / 3;
}
#marketObject6 {
    grid-area: 5 / 2 / 7 / 3;
}
#marketObject7 {
    grid-area: 1 / 3 / 4 / 4;
}
#marketObject8 {
    grid-area: 4 / 3 / 6 / 3;
}
#marketObject9 {
    grid-area: 6 / 3 / 7 / 4;
}
#marketObject10 {
    grid-area: 1 / 4 / 2 / 5;
}
#marketObject11 {
    grid-area: 2 / 4 / 5 / 5;
}
#marketObject12 {
    grid-area: 5 / 4 / 7 / 5;
}
#marketObject13 {
    grid-area: 1 / 5 / 3 / 6;
}
#marketObject14 {
    grid-area: 3 / 5 / 6 / 6;
}
#marketObject15 {
    background-color: black;
    grid-area: 6 / 5 / 7 / 6;
    grid-template-rows: 35% 40% 25%;
    justfy-items: start;
    align-items: start;
}
#marketObject15 h3 {
    align-self: start;
    padding: 0;
    margin: 2rem 0 0 2rem;
    max-width: 80%;
    grid-area: 1 / 1 / 2 / 2;
}
#marketObject15 p {
    grid-area: 2 / 1 / 3 / 2;
    margin: 1rem 0 0 2rem;
    max-width: 80%;
    
}
#servicesContactButton {
    grid-area: 3 / 1 / 4 / 2;
    margin-left: 2rem;
    justify-self: start;
}

Answer 1

我认为 flex 会让您的生活更轻松（而不是 grid）。
为了保持纵横比，在您的情况下仅使用 width width: 100%，height 将强制它根据父元素扭曲形状。

我将问题简化为图像部分。

请注意，我更改了结构以将图像填充到 <div class="column"> 中，因为内容似乎是静态的（6 列），并且仅将其设为 width: 20%，因此您摆脱了约 70% 的CSS 代码。

此外，使用 transform: scale() 而不是更改 width 以避免布局更改（昂贵/缓慢的操作）。

例如：

/* Markets */

.marketsChildFlex {
  display: flex;
  background-color: black
}

.column {
  width: 20%;
}

.marketObjects {
  background-color: black;
  display: flex;
  overflow: hidden;
  position: relative;
}

.servicesImages {
  width: 100%;
  opacity: 85%;
  transform: scale(1);
}

.marketObjects:hover img {
  transition: opacity 0.5s, transform 1s;
  opacity: 100%;
  transform: scale(1.05);
}

.marketObjects h3 {
  padding: 0.5rem 1rem;
  background-color: black;
  position: absolute;
  left: 1rem;
  bottom: 1rem;
}


/* Base */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}


/*Text*/

h3 {
  font-weight: bold;
  font-size: 18pt;
  line-height: 30px;
  margin: 0;
}

body {
  font-family: Arial, Helvetica, sans serif;
  color: white;
}

<div class="marketsChildFlex">
  <div class="column">
    <div class="marketObjects" id="marketObject1">
      <img class="servicesImages" src="https://placem.at/places?h=600">
      <h3>Box 1</h3>
    </div>
    <div class="marketObjects" id="marketObject2">
      <img class="servicesImages" src="https://placem.at/places?h=400">
      <h3>Box 2</h3>
    </div>
    <div class="marketObjects" id="marketObject3">
      <img class="servicesImages" src="https://placem.at/places?h=500">
      <h3>Box 3</h3>
    </div>
  </div>
  <div class="column">
    <div class="marketObjects" id="marketObject4">
      <img class="servicesImages" src="https://placem.at/places?w=500">
      <h3>Box 4</h3>
    </div>
    <div class="marketObjects" id="marketObject5">
      <img class="servicesImages" src="https://placem.at/places?w=1800">
      <h3>Box 5</h3>
    </div>
    <div class="marketObjects" id="marketObject6">
      <img class="servicesImages" src="https://placem.at/places?h=1400">
      <h3>Box 6</h3>
    </div>
  </div>
  <div class="column">
    <div class="marketObjects" id="marketObject7">
      <img class="servicesImages" src="https://placem.at/places?h=1800">
      <h3>Box 7</h3>
    </div>
    <div class="marketObjects" id="marketObject8">
      <img class="servicesImages" src="https://placem.at/places?h=600">
      <h3>Box 8</h3>
    </div>
    <div class="marketObjects" id="marketObject9">
      <img class="servicesImages" src="https://placem.at/places?h=600">
      <h3>Box 9</h3>
    </div>
  </div>
  <div class="column">
    <div class="marketObjects" id="marketObject10">
      <img class="servicesImages" src="https://placem.at/places?h=1400">
      <h3>Box 10</h3>
    </div>
    <div class="marketObjects" id="marketObject11">
      <img class="servicesImages" src="https://placem.at/places?h=1800">
      <h3>Box 11</h3>
    </div>
    <div class="marketObjects" id="marketObject12">
      <img class="servicesImages" src="https://placem.at/places?h=500">
      <h3>Box 12</h3>
    </div>
  </div>
  <div class="column">
    <div class="marketObjects" id="marketObject13">
      <img class="servicesImages" src="https://placem.at/places?h=400">
      <h3>Box 13</h3>
    </div>
    <div class="marketObjects" id="marketObject14">
      <img class="servicesImages" src="https://placem.at/places?h=1400">
      <h3>Box 14</h3>
    </div>
  </div>
</div>

Answer 2

正确的 css 属性是“object-fit”，而不是 objectfit 或 imagefill。 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

使图像填充网格内部，同时保持纵横比

2 个答案: