首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >为什么这个图像不调整到宽度大小,如果它是在容器内,我要指定为宽度大小?

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

Stack Overflow用户
提问于 2015-09-03 16:14:18
回答 2查看 33关注 0票数 0

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

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

代码语言:javascript
复制
.container {
  width: 80%;
  margin: 0 auto;
}
代码语言:javascript
复制
<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 -->

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-09-03 16:19:36

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

代码语言:javascript
复制
img {
    width: 100%;
}

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

票数 2
EN

Stack Overflow用户

发布于 2015-09-03 16:53:45

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

代码语言:javascript
复制
img{
    width: 100%;
}

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

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32380717

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档