html - 图像的高度和宽度不会在 CSS 中改变

Question

尝试更改图像以与另一个包含文本的 div 一起显示，并且已经尝试了几个小时都无济于事。该图像应该与其他 div 一起显示，但拒绝这样做:

<div id="leftimg">
            <img src ="SLL/student.jpg"/>
</div>

第一次尝试:

#leftimg {
    max-width: 50%;
    height: inherit;
    left: 0px;
    right: 0px;
}

第二次尝试:

#leftimg {
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

第三次尝试:

#leftimg {
    width: 500px;
    height: 500px;
}

Answer 1

您似乎在 CSS 中选择了 div 元素，而不是图像。如果您想将这些规则应用于 div 内的图像，您需要像这样在 div 的 ID 后面加上 img:

#leftimg img{
  max-width: 50%;
  height: inherit;
  left: 0px;
  right: 0px;
  . . .
}

这是一个完整的例子:

#leftimg img{
  max-width: 50%;
  height: inherit;
  left: 0px;
  right: 0px;

  /* Added to make the text wrap around the image
     feel free to ignore if that's not how you want
     it to work */
  float:left;
  padding:10px;
}

/* Added to clear the float used above - if you leave
   out my stuff above, then leave this out too */
#leftimg:after{
  content:'';
  clear:both;
}

<div>
  <div id="leftimg">
    <img src="https://pixabay.com/static/uploads/photo/2015/09/22/15/02/studying-951818_640.jpg"/>
  </div>
  <h3>Student Letting</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt turpis in magna imperdiet dapibus. Nullam eu neque vel augue rutrum euismod. Sed egestas purus blandit leo rhoncus, sit amet egestas sapien lobortis. Aliquam placerat nec diam id tincidunt. Phasellus in mollis arcu. Aliquam venenatis, est ac pharetra semper, magna libero euismod sem, ac molestie leo ex sed nunc. In ullamcorper orci in dapibus venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam posuere venenatis finibus. Vestibulum orci metus, auctor eu nisi in, suscipit viverra erat. Vivamus purus magna, porta auctor urna eu, venenatis mollis leo.</p>
  <p>Duis justo magna, hendrerit ut tortor eu, ornare viverra mi. Ut ultrices gravida arcu, nec tincidunt nulla vehicula in. Pellentesque varius nulla ligula, quis convallis felis blandit at. Nam sit amet lobortis dui, et imperdiet orci. Donec malesuada enim nec tellus auctor accumsan. Nam vehicula felis nec dolor facilisis, vel dapibus dui scelerisque. Donec quis nunc venenatis, laoreet est ac, condimentum arcu. Quisque ut luctus felis. Nulla commodo auctor risus a ullamcorper. Curabitur bibendum tincidunt ante a porta. Ut ut orci ut nulla tempor ornare.</p>
</div>

但是如果你想用这种风格将多张图片插入到一个页面中，你真的应该使用类而不是 ID，如下所示:

.leftimg img{ /* Notice how we use the class selector instead */
  max-width: 50%;
  height: inherit;
  left: 0px;
  right: 0px;

  /* Added to make the text wrap around the image
     feel free to ignore if that's not how you want
     it to work */
  float:left;
  padding:10px;
}

/* Added to clear the float used above - if you leave
   out my stuff above, then leave this out too */
.leftimg:after{ /* And again here we use the class selector instead */
  content:'';
  clear:both;
}

<div>
  <div class="leftimg"> <!-- Notice id is changed to class -->
    <img src="https://pixabay.com/static/uploads/photo/2015/09/22/15/02/studying-951818_640.jpg"/>
  </div>
  <h3>Student Letting</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt turpis in magna imperdiet dapibus. Nullam eu neque vel augue rutrum euismod. Sed egestas purus blandit leo rhoncus, sit amet egestas sapien lobortis. Aliquam placerat nec diam id tincidunt. Phasellus in mollis arcu. Aliquam venenatis, est ac pharetra semper, magna libero euismod sem, ac molestie leo ex sed nunc. In ullamcorper orci in dapibus venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam posuere venenatis finibus. Vestibulum orci metus, auctor eu nisi in, suscipit viverra erat. Vivamus purus magna, porta auctor urna eu, venenatis mollis leo.</p>
  <p>Duis justo magna, hendrerit ut tortor eu, ornare viverra mi. Ut ultrices gravida arcu, nec tincidunt nulla vehicula in. Pellentesque varius nulla ligula, quis convallis felis blandit at. Nam sit amet lobortis dui, et imperdiet orci. Donec malesuada enim nec tellus auctor accumsan. Nam vehicula felis nec dolor facilisis, vel dapibus dui scelerisque. Donec quis nunc venenatis, laoreet est ac, condimentum arcu. Quisque ut luctus felis. Nulla commodo auctor risus a ullamcorper. Curabitur bibendum tincidunt ante a porta. Ut ut orci ut nulla tempor ornare.</p>
</div>

使用 CSS 类执行此操作将使您可以在同一页面上使用相同的样式设置多个图像，而无需重复您的代码。如果您只打算拥有一张图片，那么将其保留为 ID 可能会更有益。这仅取决于您将如何使用它。