代码之家 › 专栏 › 技术社区 › drstuggels

Img不随浏览器调整大小

resize image css html

drstuggels · 技术社区 · 7 年前

所以我有一个调整尺寸的问题 img .它只是保持原样大小。如果您注意到错误,请告知。非常感谢。

*::selection {
  background: #333;
}

*::-moz-selection {
  background: #333;
}

body {
  background-color: #fff;
  font-family: 'Hind', sans-serif;
}

* {
  padding: 0;
  margin: 0;
}

#favul {
  list-style-type: decimal;
  font-family: 'Josefin Sans', sans-serif;
  padding-left: 8vw;
  margin: 6.5vh auto;
}

#favul>li {
  margin: 1vw 0;
}

#favtit {
  text-align: center;
}

#fav {
  border: 1px solid #000;
  font-size: 48px;
  padding: 15px;
  width: 1000px;
  height: 90vh;
  overflow: hidden;
  background-color: #0A4366;
  position: absolute;
}

#images {
  position: absolute;
  bottom: 0%;
  left: 0%;
}

#images>img {
  max-width: 100%;
  height: auto;
  width: auto\9;
}

<div id="fav">
    
    <p id="favtit">My Favorite Characters</p>
    
    <ul id="favul">
      <li>The Flash</li>
      <li>Batman</li>
      <li>Green Arrow</li>
      <li>Dr. Manhattan</li>
    </ul><!--#favul-->
    
    <div id="images">
      <img src="http://nof.bof.nu/dccomics/characters.jpeg" alt="characters" />
    </div><!--#images-->    
    
  </div><!--#fav-->

按全屏,否则你不会得到我的问题。

2 回复 | 直到 7 年前

Abhishek Pandey 7 年前

#fav 的 width:100%; 和 max-width: 1000px; ,它将根据屏幕大小调整宽度。

#fav {
    border: 1px solid #000;
    font-size: 48px;
    padding: 15px;
    max-width: 1000px;
    width:100%;
    height: 90vh;
    overflow: hidden;
    background-color: #0A4366;
    position: absolute;
}

Updated fiddle