如何让图像在@media 屏幕上按比例显示？

Question

当将弹性项目更改为列时，我无法让图像区域在较小的视口（最大宽度：768px）上显示全尺寸

即使在 min-width 和 max-width 设置为 100% 的情况下，图像仍然显示在 760px 上，只有 49.59px

我还确定这会是一个溢出问题，反正视口设置为 100%。

这是我的html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/styles.css">
    <link rel="stylesheet" type="text/css" href="./css/blog-styles.css">
    <script
              src="https://code.jquery.com/jquery-3.6.0.js"
              integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
              crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Open+Sans&family=Poppins&family=Raleway:wght@600&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
    <title>Blog</title>

<script type='text/javascript' src=js/templates.js></script>
    
</head>

<body>

<!-- Main Menu Section-->

<my-menu></my-menu>

<!-- about section-->

<section>
<div class="blog-post__cards">
        <div class="blog-post">
            <div class="blog-post__img">
                <img src="/img/post-photo.jpg" alt="">
            </div>
         <div class="blog-post__info">
             <div class="blog-post__date">
                 <span>Sunday</span>
                 <spa>August 18 2021</spa>
             </div>
             <h1 class="blog-post__title">Blog Post Title</h1>
             <p class="blog-post__text">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laudantium, reiciendis ut dolore voluptatibus consequatur quam impedit eligendi sapiente voluptate, molestiae libero quae magni quia. Minima ipsa velit eius aut!
             </p>
             <a href="#" class="blog-post__cta">Read More</a>
         </div>       
        </div>

        <div class="blog-post">
            <div class="blog-post__img">
                <img src="/img/post-photo.jpg" alt="">
            </div>
         <div class="blog-post__info">
             <div class="blog-post__date">
                 <span>Sunday</span>
                 <spa>August 18 2021</spa>
             </div>
             <h1 class="blog-post__title">Blog Post Title</h1>
             <p class="blog-post__text">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laudantium, reiciendis ut dolore voluptatibus consequatur quam impedit eligendi sapiente voluptate, molestiae libero quae magni quia. Minima ipsa velit eius aut!
             </p>
             <a href="#" class="blog-post__cta">Read More</a>
         </div>       
        </div>

        <div class="blog-post">
            <div class="blog-post__img">
                <img src="/img/post-photo.jpg" alt="">
            </div>
         <div class="blog-post__info">
             <div class="blog-post__date">
                 <span>Sunday</span>
                 <spa>August 18 2021</spa>
             </div>
             <h1 class="blog-post__title">Blog Post Title</h1>
             <p class="blog-post__text">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laudantium, reiciendis ut dolore voluptatibus consequatur quam impedit eligendi sapiente voluptate, molestiae libero quae magni quia. Minima ipsa velit eius aut!
             </p>
             <a href="#" class="blog-post__cta">Read More</a>
         </div>       
        </div>
    </div>
</section>    



<!-- Main Footer Section-->

<my-footer></my-footer>

</body>

而这里我分享对应的CSS

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*html {
  font-family: "Roboto", sans-serif;
  font-size: 10px;
}
*/
img {
  width: 100%;
}

section {
  font-family: "lato", sans-serif;
  font-size: 10px;
  width: 100%;
  height: 10vp;
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  background-color: #eee;
  padding: 0 15px;
  overflow: scroll;
}

.blog-post__cards {
  width: 100%;
  padding: 5em;
  display: flex;
  align-content: space-around;
  align-items: flex-start;
  flex-direction: column;
  gap: 10em;
  transform: scale(0.95);
}

.blog-post {
  width: 850px;
  height: 350px;
  max-width: 98em;
  padding: 5em;
  background-color: #fff;
  box-shadow: 0 1.4em 8em rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  border-radius: 0.8em;
}

.blog-post__img {
  min-width: 35em;
  max-width: 35em;
  height: 30em;
  transform: translateX(-8em);
  position: relative;
}


.blog-post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0.8em;
}

.blog-post__img::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(
    to right,
    rgba(79, 172, 254, 0.8),
    rgba(0, 242, 254, 0.8)
  );
  box-shadow: 0.5em 0.5em 3em 1px rgba(0, 0, 0, 0.5em);
  border-radius: 0.8em;
}

.blog-post__date span {
  display: block;
  color: rgba(0, 0, 0, 0.5);
  font-size: 2em;
  font-weight: 600;
  margin: 0.2em 0;
}

.blog-post__title {
  font-size: 2.5em;
  margin: .8em 0 1em;
  text-transform: uppercase;
  color: #4facfe;
}

.blog-post__text {
  margin-bottom: 3em;
  font-size: 1.4em;
  color: rgba(0, 0, 0, 0.7);
}

.blog-post__cta {
  display: inline-block;
  padding: 1.2em 3em;
  margin-top: 0.5em;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 1.2em;
  color: #fff;
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  border-radius: 0.8em;
  text-decoration: none;
  float: right;
}

.blog-post__cta:hover {
  background-image: linear-gradient(to right, #00f2fe 0%, #4facfe 100%);
}

@media screen and (max-width: 1068px) {
  .blog-post {
    max-width: 80em;
  }

  .blog-post__img {
    min-width: 30em;
    max-width: 30em;
  }
}

@media screen and (max-width: 868px) {
  .blog-post {
    max-width: 70em;
  }
}

@media screen and (max-width: 768px) {
  .blog-post {
    padding: 2.5em;
    flex-direction: column;
  }

  .blog-post__img {
    min-width: 100%;
    max-width: 100%;
    transform: translate(0, -4em);
  }
}

非常感谢您对此进行调查！我尽可能多地处理 flex 项目，因此非常感谢任何可以应用于此项目的反馈。

谢谢！

Answer 1

有时，如果没有可编辑的示例，很难在 Stack Overflow 中尝试和复制问题。但是，我将您的部分代码粘贴到编辑器中以尝试复制。您是否希望图像在您的移动断点处扩展到视口的整个宽度？

在移动样式中，我删除了很多在父容器上设置的填充和转换规则，因此它可能是 all/some 这些规则的组合。

@media screen and (max-width: 768px) {
    section {
      width: 100%;
    }
    .blog-post {
      padding: 0;
      flex-direction: column;
      height: unset;
      max-width: 100%;
    }
    
    .blog-post__cards {
      transform: scale(1);
    }
    .blog-post__cards{
      padding: 0;
    }
    .blog-post__img {
      min-width: 100%;
      max-width: 100%;
      width: 100%;
      transform: translate(0, -4em);
    }
    .blog-post__info {
      padding: 0 1rem 2rem;
    }
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*html {
  font-family: "Roboto", sans-serif;
  font-size: 10px;
}
*/
img {
  width: 100%;
}

section {
  font-family: "lato", sans-serif;
  font-size: 10px;
  width: 100%;
  height: 10vp;
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  background-color: #eee;
  padding: 0 15px;
  overflow: scroll;
}

.blog-post__cards {
  width: 100%;
  padding: 5em;
  display: flex;
  align-content: space-around;
  align-items: flex-start;
  flex-direction: column;
  gap: 10em;
  transform: scale(0.95);
}

.blog-post {
  width: 850px;
  height: 350px;
  max-width: 98em;
  padding: 5em;
  background-color: #fff;
  box-shadow: 0 1.4em 8em rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  border-radius: 0.8em;
}

.blog-post__img {
  min-width: 35em;
  max-width: 35em;
  height: 30em;
  transform: translateX(-8em);
  position: relative;
}


.blog-post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0.8em;
}

.blog-post__img::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(
    to right,
    rgba(79, 172, 254, 0.8),
    rgba(0, 242, 254, 0.8)
  );
  box-shadow: 0.5em 0.5em 3em 1px rgba(0, 0, 0, 0.5em);
  border-radius: 0.8em;
}

.blog-post__date span {
  display: block;
  color: rgba(0, 0, 0, 0.5);
  font-size: 2em;
  font-weight: 600;
  margin: 0.2em 0;
}

.blog-post__title {
  font-size: 2.5em;
  margin: .8em 0 1em;
  text-transform: uppercase;
  color: #4facfe;
}

.blog-post__text {
  margin-bottom: 3em;
  font-size: 1.4em;
  color: rgba(0, 0, 0, 0.7);
}

.blog-post__cta {
  display: inline-block;
  padding: 1.2em 3em;
  margin-top: 0.5em;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 1.2em;
  color: #fff;
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  border-radius: 0.8em;
  text-decoration: none;
  float: right;
}

.blog-post__cta:hover {
  background-image: linear-gradient(to right, #00f2fe 0%, #4facfe 100%);
}

@media screen and (max-width: 1068px) {
  .blog-post {
    max-width: 80em;
  }

  .blog-post__img {
    min-width: 30em;
    max-width: 30em;
  }
}

@media screen and (max-width: 868px) {
  .blog-post {
    max-width: 70em;
  }
}

@media screen and (max-width: 768px) {
  section {
    width: 100%;
  }
  .blog-post {
    padding: 0;
    flex-direction: column;
    height: unset;
    max-width: 100%;
  }
  
  .blog-post__cards {
    transform: scale(1);
  }
  .blog-post__cards{
    padding: 0;
  }
  .blog-post__img {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    transform: translate(0, -4em);
  }
  .blog-post__info {
    padding: 0 1rem 2rem;
  }
}

<section>
    <div class="blog-post__cards">
        <div class="blog-post">
            <div class="blog-post__img">
                <img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=800&height=600" alt="">
            </div>
            <div class="blog-post__info">
                <div class="blog-post__date">
                    <span>Sunday</span>
                    <span>August 18 2021</span>
                </div>
                <h1 class="blog-post__title">Blog Post Title</h1>
                <p class="blog-post__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laudantium, reiciendis ut dolore voluptatibus consequatur quam impedit eligendi sapiente voluptate, molestiae libero quae magni quia. Minima ipsa velit eius aut!</p>
                <a href="#" class="blog-post__cta">Read More</a>
            </div>
        </div>
    </div>
</section>

如何让图像在@media 屏幕上按比例显示？

How do I get the image to display in full proportion on @media screen?

css

media-queries

flexbox

image-size