为什么这个图像不调整到宽度大小，如果它是在容器内，我要指定为宽度大小？

Question

我正在尝试调整容器内所有宽度的大小。因此，所有各方都将达到80%。为什么图像也不调整呢？我希望这个图像不会像现在这样向右传播。我希望它能与其他事物保持一致。

下面是试图执行上述操作的主要HTML和CSS代码：

​

.container {
  width: 80%;
  margin: 0 auto;
}

<div class="container">
  <div class="header">
    <h1>About me </h1>
  </div>
  <div class="image">
    <img src="http://lorempixel.com/1400/300" />
  </div>
  <div class="intro column">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <div class="skills column">
    <ul id="skill-list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <div class="main_text">
    <p>
      Small batch wolf pug bicycle rights, letterpress kitsch Etsy listicle farm-to-table. Hoodie flannel Pitchfork normcore chambray, polaroid viral before they sold out. Wes Anderson skateboard single-origin coffee fixie shabby chic pour-over, four loko typewriter. Banksy American Apparel sartorial, irony XOXO plaid narwhal cred mumblecore keffiyeh asymmetrical sriracha. Marfa PBR lomo four loko aesthetic master cleanse, Pitchfork church-key bitters sartorial beard keffiyeh Thundercats. Mixtape aesthetic mustache readymade Blue Bottle, Banksy Wes Anderson Intelligentsia Kickstarter cliche biodiesel normcore farm-to-table polaroid narwhal. Semiotics mixtape Portland kale chips, heirloom Carles seitan pickled 3 wolf moon church-key master cleanse fingerstache.
    </p>
    <p>
      Tofu pork belly pug Tumblr crucifix. XOXO 3 wolf moon whatever, narwhal Vice Blue Bottle distillery PBR&B lumbersexual forage tattooed leggings 90's letterpress. Brooklyn pork belly umami hashtag gentrify tilde. Blog pork belly Godard mlkshk. Kitsch letterpress kale chips narwhal messenger bag. Migas farm-to-table banjo hella. Taxidermy lo-fi mlkshk normcore paleo DIY, tofu VHS lumbersexual ugh listicle.
    </p>
  </div>
</div> <!-- end container -->

​

Answer 1

没有样式的图像自动默认它们的真实大小(例如。正如李斯特先生在评论中所说的那样，在屏幕上，1400 in乘以300 in的图片将等于1400 in乘以300 in)。你可以这样做：

img {
    width: 100%;
}

若要将图像宽度设置为其父级宽度的100%，请执行以下操作。

Answer 2

宽度属性不继承。因此，容器的宽度是其父元素( body元素)的80%。但是图像的宽度是它的真正大小。若要更改其宽度，请添加css样式。

img{
    width: 100%;
}

这会将其宽度更改为其父(容器)的100%。

*性能注意:最好是更改图片本身的大小，而不是使用宽度属性，因为您下载了整个图片，然后调整它的大小，这意味着无用的数据下载。