Question

我正在处理一个小项目，我刚刚完成了第一部分的基本布局。我还希望通过@media规则访问页面电话。但是现在我问你们，当浏览器像这样调整大小时，在网页上处理图片的正确方法是什么。

从这个：

对此（调整大小（小））：

看起来很糟糕。是否有可能使它不会调整大小而只是消失（有点像溢出：隐藏）。如果是这样我怎么办？你会以专业人士的方式推荐哪种方式？

/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* colors */
.col-grey {
  background-color: #E0E0E0;
}
/* header section */
html {
  font-family: "Lato", sans-serif;
}

.bold {
  font-weight: 900;
}

header {
  height: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.logo {
  display: flex;
  padding-left: 24px;
  align-items: center;
  height: 2rem;
}

.logo i {
  padding-left: 1.5rem;
  padding-right: 5px;

}

.navigation span {
  padding: 0 1rem;
}

.navigation {
  padding-right: 24px
}

/* main-section */
.learn-more-container {
  display: flex;
  background-color: #f2f2f2;
  padding: 2rem 1.5rem;
}

.learn-more-container img {
  padding-right: 1.5rem;
  width: 60%;
  height: auto;

}

.learn-more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #4A4A4A;
  padding-left: 50px;
}

.learn-more h1 {
  font-size: 60px;
  font-family: sans-serif;
  font-weight: 700;
  padding-bottom: 40px;
}

.learn-more p {
  font-weight: 500;
  font-size: 30px;
  padding-bottom: 40px;
}

.btn-start-here {}


.btn:focus {
  outline:none !important;
}

.btn {
  padding: 8px 0;
  font-size: 20px;
  font-weight: 500;
  color: white;
  background-color: #595959;
  border-radius: 2px;
  border: 0;
}

.btn-start-here:hover {
  box-shadow: 5px 8px 15px grey;
  background-color: black;
}

.btn-start-here:active {
  background-color: lightgrey;
  border: 1px solid black;
  box-shadow: none;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Comar Academy | Home</title>
    <link rel="stylesheet" href="./resources/css/reset.css">
    <link rel="stylesheet" href="./resources/css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
  </head>
  <body>
    <!-- header section -->
    <header>
      <div class="logo">
        <!-- <img src="#" alt="A picture our logo"> -->
        <i class="fa fa-globe fa-2x"></i>
        <h1><span class="bold">COLMAR</span>ACADEMY</h1>
      </div>
      <div class="navigation">
        <span>On campus</span>
        <span>Online</span>
        <span>For companies</span>
        <span>Sign in</span>
      </div>
    </header>

    <!-- Main-content -->
    <div class="learn-more-container col-grey">
      <img src="./resources/images/banner.jpg" alt="A picture of people sitting on a table studying">
        <div class="learn-more">
          <h1>Learn something <br> new Everyday</h1>
          <p>Lorem ipsum dolor sit amet,<br>consectetur adipiscining elit.</p>
          <button type="button" name="Start here" class="btn-start-here btn">Start here</button>
        </div>
    </div>
  </body>
</html>

第28行是带图片的那一行。非常感谢你的每一个帮助：D。

Answer 1

你必须像其他框架所做的那样做。请参阅您可以获得所需结果的链接。

https://www.smashingmagazine.com/2013/07/choosing-a-responsive-image-solution/

Answer 2

所以你可以尝试给图像一个

max-width: 50%;
height: auto;

或者您可以尝试使用bootstrap中的媒体规则，如果您按照这些步骤操作它们就没有理由不起作用。请参阅此页面以获取一些帮助。 https://www.w3schools.com/css/css_rwd_images.asp

图像尺寸向下，但绝不会大于最大宽度。如果你想让它消失，只需再尝试一下媒体规则，然后用..改变它。

    @media screen and (max-width:480px) {  
        .cupcake img {
            display: none;
        }
    }

适当的技术来处理图片大小调整

2 个答案: