圖像的高度和寬度在CSS中不會改變

Question

嘗試改變圖像以與另一個包含文本的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元素，ins圖像的tead。如果您想對這些規則適用於格內的圖像，您需要按照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保留可能更有好處。這取決於你將如何使用它。

Answer 2

給圖像元素的ID，並設置它的寬度/ heigth：

HMTL：

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

而在你的CSS文件

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

或設置背景div

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

Answer 3

嘗試

img{ 

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

Answer 4

你可以這樣說：

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

Answer 5

如果你想改變你的圖像尺寸，改變圖像本身試試這個

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

，而不是以圖像包裝