如何制作响应式图片,以保持多个项目之间相同的纵横比。

huangapple go评论65阅读模式
英文:

How to make responsive images that keep the same aspect ratio across multiple items

问题

我在尝试在屏幕上保持一致的图像大小时,同时在容器中保持稳定的纵横比时感到有些困惑。

我试图创建一个小卡片,其中包含一张图片和一个段落。我以为调整图片的宽度也会影响高度,使图片在多个元素中保持相同的大小,就像div等元素一样。如果我不指定高度,我的div会采用随机高度,似乎是基于内部内容的数量。但我也明白,给定高度会影响页面的响应性。我感到非常困惑。

我尝试过的事情:

  • 仅为图片指定宽度而不指定高度,因为我理解这会破坏响应性。
  • 我正在使用flex,但无法通过flex-basis:1来创建均匀的列。
  • 我尝试通过为div指定特定的高度来调整它,只有这种方式似乎可以使它们保持均匀的大小,但我认为只指定宽度而不需要给元素指定高度可以解决列高度不均匀的问题。

我希望我说得清楚。如果我表达得有点混乱,请告诉我。

英文:

I am a bit confused when trying to keep a consistent size with my images when the screen while keeping a stable aspect ratio in my containers.

I try to make a little card that holds a picture and a paragraph. I thought that adjusting the width of a picture would also have an effect on height, making pictures evenly sized and the same across multiple elements, the same with elements like divs. If I don't specify a height, my divs take random heights which seems to be based on amount of content inside. But also, I understand that giving a height would affect the responsiveness of the page. I am very confused.

Things I have tried:

  • Giving only a width to images without specifying height as I understand that breaks responsiveness.
  • I am using flex, but couldn't make even columns giving flex-basis:1
  • I tried to adjust it by giving the divs a specific height, only that way it seemed to be evenly sized, but I thought it wasn't necessary to give elements height and only width would solve the issue of having even columns in height.

I hope I make sense. If I have phrased it a bit confusing, please let me know.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.flex {
  display: flex;
}

.container-specs {
  width: 80%;
  height: 100vh;

  border: solid 2px burlywood;
  gap: 1rem;

  align-items: center;
  justify-content: center;
}

.container-specs &gt; div {
  width: 100%;
  border: solid 2px brown;
  flex-direction: column;
  flex-basis: 1;
}

.container {
  justify-content: center;
}

img {
  width: 100%;
}

<!-- language: lang-html -->

&lt;div class=&quot;flex container&quot;&gt;
        &lt;div class=&quot;container-specs flex&quot;&gt;
          &lt;div class=&quot;flex&quot;&gt;
            &lt;img src=&quot;https://images.wallpaperscraft.com/image/single/sea_coast_stones_940685_1280x720.jpg&quot; alt=&quot;&quot;/&gt;
            &lt;p&gt;
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui et
              magnam quae ipsa corrupti facilis quasi assumenda alias numquam
              magni. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Modi repellendus iusto laboriosam doloribus corrupti at.
              Recusandae sint quisquam ducimus soluta minima, ratione voluptatum
              omnis repellat iusto, accusamus amet! Enim ratione consequatur
              unde sit dolore tenetur!
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;flex&quot;&gt;
            &lt;img src=&quot;https://images.wallpaperscraft.com/image/single/road_fog_valley_938056_1280x720.jpg&quot; alt=&quot;&quot;/&gt;
            &lt;p&gt;
              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
              Doloribus vero deserunt quos, expedita est fugiat minima maxime
              debitis aliquam ea? Velit nisi sapiente soluta sit aut corporis
              eaque omnis, odit mollitia cumque hic! Iusto, autem.
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;flex&quot;&gt;
            &lt;img src=&quot;https://images.wallpaperscraft.com/image/single/stream_meadow_flowers_933530_1280x720.jpg&quot; alt=&quot;&quot;/&gt;
            &lt;p&gt;
              Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Molestiae accusantium asperiores quibusdam quam iusto. Incidunt
              consequatur temporibus magni debitis culpa soluta laudantium,
              voluptatem maxime minus reprehenderit? Perferendis, ipsam. Enim
              facilis iste, provident deleniti ab omnis.
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 0

你是指像这样吗?

<!-- 开始片段: js 隐藏: false 控制台: true babel: null -->

<!-- 语言: lang-css -->
.flex {
  display: flex;
}

.container-specs {
  width: 100%;
  min-height: 100vh;
  padding: 1rem 1rem;
  border: solid 2px green;
  gap: 1rem;
  justify-content: center;
}

.container-specs > div {
  width: 100%;
  border: solid 2px red;
  flex-direction: column;
  flex-basis: 1;
  display: flex;
}

.container {
  justify-content: center;
}

img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  max-height: 500px;
}

<!-- 语言: lang-html -->
<div class="flex container">
  <div class="container-specs flex">
    <div class="flex">
      <img src="https://images.wallpaperscraft.com/image/single/sea_coast_stones_940685_1280x720.jpg" alt="" />
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui et
        magnam quae ipsa corrupti facilis quasi assumenda alias numquam
        magni. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Modi repellendus iusto laboriosam doloribus corrupti at.
        Recusandae sint quisquam ducimus soluta minima, ratione voluptatum
        omnis repellat iusto, accusamus amet! Enim ratione consequatur
        unde sit dolore tenetur!
      </p>
    </div>
    <div class="flex">
      <img src="https://images.wallpaperscraft.com/image/single/road_fog_valley_938056_1280x720.jpg" alt="" />
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
        Doloribus vero deserunt quos, expedita est fugiat minima maxime
        debitis aliquam ea? Velit nisi sapiente soluta sit aut corporis
        eaque omnis, odit mollitia cumque hic! Iusto, autem.
      </p>
    </div>
    <div class="flex">
      <img src="https://images.wallpaperscraft.com/image/single/stream_meadow_flowers_933530_1280x720.jpg" alt="" />
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Molestiae accusantium asperiores quibusdam quam iusto. Incidunt
        consequatur temporibus magni debitis culpa soluta laudantium,
        voluptatem maxime minus reprehenderit? Perferendis, ipsam. Enim
        facilis iste, provident deleniti ab omnis.
      </p>
    </div>
  </div>
</div>

<!-- 结束片段 -->
英文:

Do you mean like this?

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

.flex {
  display: flex;
}

.container-specs {
  width: 100%;
  min-height: 100vh;
  padding: 1rem 1rem;
  border: solid 2px green;
  gap: 1rem;
  justify-content: center;
}

.container-specs &gt; div {
  width: 100%;
  border: solid 2px red;
  flex-direction: column;
  flex-basis: 1;
  display: flex;
}

.container {
  justify-content: center;
}

img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  max-height: 500px;
}

<!-- language: lang-html -->

&lt;div class=&quot;flex container&quot;&gt;
        &lt;div class=&quot;container-specs flex&quot;&gt;
          &lt;div class=&quot;flex&quot;&gt;
            &lt;img src=&quot;https://images.wallpaperscraft.com/image/single/sea_coast_stones_940685_1280x720.jpg&quot; alt=&quot;&quot;/&gt;
            &lt;p&gt;
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui et
              magnam quae ipsa corrupti facilis quasi assumenda alias numquam
              magni. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Modi repellendus iusto laboriosam doloribus corrupti at.
              Recusandae sint quisquam ducimus soluta minima, ratione voluptatum
              omnis repellat iusto, accusamus amet! Enim ratione consequatur
              unde sit dolore tenetur!
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;flex&quot;&gt;
            &lt;img src=&quot;https://images.wallpaperscraft.com/image/single/road_fog_valley_938056_1280x720.jpg&quot; alt=&quot;&quot;/&gt;
            &lt;p&gt;
              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
              Doloribus vero deserunt quos, expedita est fugiat minima maxime
              debitis aliquam ea? Velit nisi sapiente soluta sit aut corporis
              eaque omnis, odit mollitia cumque hic! Iusto, autem.
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;flex&quot;&gt;
            &lt;img src=&quot;https://images.wallpaperscraft.com/image/single/stream_meadow_flowers_933530_1280x720.jpg&quot; alt=&quot;&quot;/&gt;
            &lt;p&gt;
              Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Molestiae accusantium asperiores quibusdam quam iusto. Incidunt
              consequatur temporibus magni debitis culpa soluta laudantium,
              voluptatem maxime minus reprehenderit? Perferendis, ipsam. Enim
              facilis iste, provident deleniti ab omnis.
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月1日 07:22:00
  • 转载请务必保留本文链接:https://go.coder-hub.com/76377838.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定