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

【问题标题】：How do I get the image to display in full proportion on @media screen?如何让图像在@media 屏幕上全比例显示？
【发布时间】：2026-01-08 22:35:02
【问题描述】：

将 flex-item 更改为列时，我无法让图像区域在较小的视口（最大宽度：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);
  }
}

非常感谢您查看此内容！我正在尽可能多地使用弹性项目，因此非常感谢任何可以应用于该项目的反馈。

谢谢！

【问题讨论】：

  • 我无法让图像区域在较小的视口上采用全尺寸这到底是什么意思，什么图像区域？全尺寸什么？ &lt;img&gt; 已经填满了它的容器
  • 嗨 Zohir，我指的是带有类 .blog-post__img 的图像区域（类似蓝色调的元素。如果您在较小的视口上显示 html，则此图像会缩小到失控. 我只是想让这个元素在其容器顶部以全显示的列方向放置（最大宽度和高度）

标签： css flexbox media-queries image-size


【解决方案1】：

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

在移动样式中，我删除了很多填充和在父容器上设置的变换规则，因此它可能是所有/部分规则的组合。

@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>

【讨论】：

  • 非常感谢比约恩。这解决了卡片图像的问题，我现在必须在视口缩小时缩小它们。
  • 很好，没问题
猜你喜欢
相关资源
最近更新 更多
热门标签
Java Python linux javascript C# Mysql Docker 算法 前端 SpringBoot Redis Vue spring .net 设计模式 .net core c++ kubernetes 数据库 机器学习 大数据 数据结构 微服务 js 人工智能 Go Android 面试 程序员 JVM 云原生 后端 ASP.net core 深度学习 CSS k8s git golang PHP devops Nginx Django React mybatis 架构 多线程 Spring Boot 云计算 LeetCode 分布式