为啥屏幕宽度低于 300px 时图像尺寸不减小？

Posted 2023-03-06

【中文标题】为啥屏幕宽度低于 300px 时图像尺寸不减小？

【英文标题】：Why doesn't the image size reduce when the screen width is below 300px?为什么屏幕宽度低于 300px 时图像尺寸不减小？

【发布时间】：2022-01-04 09:39:33

【问题描述】：

我的这个网页在桌面上看起来不错，但无法正确适应移动电话等较小的设备。我什至尝试在 CSS 中对 width 属性使用“clamp”，但无济于事。它仍然会溢出到屏幕的右侧，并且元素不会像应有的那样保持居中。

下面是代码：

:root 
  --main-color: #087830;
  --secondary-color: #e7ffdb;
  --dark-color: #444;
  --light-color: #fafafa


body 
  font-family: Quicksand, sans-serif;
  background: radial-gradient(var(--light-color), var(--light-color), var(--secondary-color));
  background-repeat: no-repeat;
  color: var(--dark-color);
  text-shadow: 0 0 2px var(--light-color);
  margin: 0;
  padding: 0 1em;
  display: grid;
  place-items: center;
  font-size: 20px;
  overflow-x: hidden;
  word-wrap: break-word


a 
  text-decoration: none


input 
  box-sizing: border-box


h1,
h2,
h3,
h4,
h5,
h6 
  font-family: Eczar, serif;
  font-weight: 700;
  margin: 0


h2 
  color: var(--main-color)


section 
  border-bottom: 2px solid #b6fd92;
  width: 100%


.full-height 
  min-height: 100vh


.image-label 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  text-shadow: 0 0 20px var(--dark-color)


.cta-button 
  background: var(--main-color);
  color: var(--light-color);
  text-shadow: none;
  border: 2px solid var(--main-color);
  border-radius: 2em;
  padding: 10px 1em;
  font-weight: 700


.cta-button:hover 
  background: var(--light-color);
  color: var(--main-color);
  transition-duration: .4s


.navbar 
  height: 100px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between


.navbar div 
  display: flex;
  align-items: center


.nav-title 
  height: 100%;
  gap: 10px


.navbar img 
  height: 70%


.nav-toggle,
.nav-toggle-label 
  position: fixed;
  right: -100vh;
  top: 0;
  height: 80px;
  width: 110px;
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  opacity: 0;
  color: var(--main-color);
  font-weight: 700


.website-title 
  max-width: 200px


.nav-toggle 
  z-index: 3


.nav-toggle-label 
  z-index: 2


.navbar a 
  text-decoration: none;
  color: var(--dark-color);
  margin: 0 5px;
  border-radius: 1em;
  padding: .5em 15px


.navbar a:hover 
  background: var(--light-color);
  color: var(--main-color);
  box-shadow: 0 0 5px var(--light-color);
  transition-duration: .4s


.hero 
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 2em;
  gap: 50px


.hero div 
  max-width: 500px


.hero h2 
  font-size: 3em;
  line-height: 1em


.hero img 
  width: 100%


@media screen and (max-width:1020px) 

  .nav-toggle,
  .nav-toggle-label 
    right: 10px;
    top: 10px
  

  .nav-toggle-label 
    opacity: 1
  

  .nav-toggle:checked~.navlinks 
    right: 0;
    transition-duration: .4s
  

  .nav-toggle:checked~.nav-toggle-label 
    color: var(--light-color);
    text-shadow: none
  

  .navlinks 
    position: fixed;
    top: 0;
    right: -200px;
    height: 100vh;
    width: 200px;
    background: var(--main-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1
  

  .navlinks a 
    color: var(--light-color)
  

<section class="full-height">
  <nav class="navbar">
    <div class="nav-title">
      <img src="logo.svg" >
      <img class="website-title" src="website-title.svg" >
    </div>
    <input type="checkbox" class="nav-toggle">
    <span class="nav-toggle-label">Menu</span>
    <div class="navlinks">
      <a aria-current="page" class="" href="/">Home</a>
      <a aria-current="page" class="" href="/">Link 2</a>
      <a aria-current="page" class="" href="/">Link 3</a>
      <a aria-current="page" class="" href="/">Link 4</a>
      <a aria-current="page" class="" href="/">Login</a>
    </div>
  </nav>
  <div class="hero">
    <div>
      <h2>Catchy Line</h2>
      <p>Description bla bla bla bla bla bla bla bla bla bla bla</p>
      <br>
      <a aria-current="page" class="cta-button" href="/">CTA Button</a>
    </div>
    <div>
      <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" >
    </div>
  </div>
</section>

如何让我的代码响应式？

【问题讨论】：

大象图像在我端正确缩放。只有当视口变得非常窄时，内容（标题、按钮等）才会导致父 div“英雄”保持在 263 像素。如果在正文中添加 word-break: break-all，图像会无限缩小。但这可能不是你想做的事情。

【参考方案1】：

要使您的图像“响应式”（意味着它们不会溢出您的屏幕/主体），请尝试在您的图像类中添加 max-width: 95% 之类的内容。

您还可以设置 div 的background-url 并操作您的 div 使其不大于屏幕。

【参考方案2】：

正如 Sev 所提到的，阻止图像缩小的是其他内容的宽度。我不会为此费心调整它，我认为这些天没有人使用宽度小于 300 像素的手机。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。