图像的高度和宽度在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中的图像，则需要使用img跟踪div的ID：

#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类可以让您使用相同的样式在同一页面上拥有多个图像，而无需重复您的代码。如果您只想拥有一张图片，那么将它留作身份证可能更有利。这取决于你将如何使用它。

Answer 2

给image元素一个id并设置它的宽度/高度：

HMTL：

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

在你的CSS文件中

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

或者设置div的背景

#leftimg {
    background-image: url("SLL/student.jpg");
}

Answer 3

你可以这样做：

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

Answer 4

试试这个

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

如果要更改图像的尺寸，请更改为图像本身，而不是图像包装

Answer 5

试

img{

     width:100%;
     display: table-cell; /* to give the img full height */
}