以下html未正确显示图像。图像是233 x 144,是垂直图像,但它在页面中水平显示。
<p>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://machineryrestorations.blob.core.windows.net/publicfiles/blogs/dewalt_RAS_GE/images/GE_LongArm_PreDelivery_Kraked_W377xH233.jpg" alt="Long Arm pre-delivery" />
</div>
<div class="col-md-8">
<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci orci, efficitur nec pretium at, iaculis elementum sapien. Etiam id metus quis metus semper ullamcorper nec non dui. Aliquam aliquam tempus orci, eget laoreet erat dignissim non. Maecenas sed leo blandit, condimentum ipsum et, aliquam libero. Ut neque lacus, viverra quis ipsum vitae, lobortis rhoncus neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vehicula consectetur augue, quis iaculis turpis gravida in.
<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci orci, efficitur nec pretium at, iaculis elementum sapien. Etiam id metus quis metus semper ullamcorper nec non dui. Aliquam aliquam tempus orci, eget laoreet erat dignissim non. Maecenas sed leo blandit, condimentum ipsum et, aliquam libero. Ut neque lacus, viverra quis ipsum vitae, lobortis rhoncus neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vehicula consectetur augue, quis iaculis turpis gravida in.
</div>
</div>
</div>
</p>
有什么方法可以解决这个问题吗?
答案 0 :(得分:0)
代码没有错。这是形象。使用本地的图像,它的工作原理。我已经改变了图像,它看起来很好
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://static.pexels.com/photos/3247/nature-forest-industry-rails.jpg" alt="Long Arm pre-delivery" width="300" height="200">
</div>
<div class="col-md-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci orci, efficitur nec pretium at, iaculis elementum sapien. Etiam id metus quis metus semper ullamcorper nec non dui. Aliquam aliquam tempus orci, eget laoreet erat dignissim non. Maecenas sed leo blandit, condimentum ipsum et, aliquam libero. Ut neque lacus, viverra quis ipsum vitae, lobortis rhoncus neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vehicula consectetur augue, quis iaculis turpis gravida in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci orci, efficitur nec pretium at, iaculis elementum sapien. Etiam id metus quis metus semper ullamcorper nec non dui. Aliquam aliquam tempus orci, eget laoreet erat dignissim non. Maecenas sed leo blandit, condimentum ipsum et, aliquam libero. Ut neque lacus, viverra quis ipsum vitae, lobortis rhoncus neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vehicula consectetur augue, quis iaculis turpis gravida in.
</div>
</div>
</div>
&#13;
答案 1 :(得分:0)
旋转它
<强> DEMO HERE 强>
DEMO HERE TOO
img {
transform: rotate(90deg);
}
&#13;
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://machineryrestorations.blob.core.windows.net/publicfiles/blogs/dewalt_RAS_GE/images/GE_LongArm_PreDelivery_Kraked_W377xH233.jpg" alt="Long Arm pre-delivery" />
</div>
<div class="col-md-8">
<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci orci, efficitur nec pretium at, iaculis elementum sapien. Etiam id metus quis metus semper ullamcorper nec non dui. Aliquam aliquam tempus orci, eget laoreet erat dignissim
non. Maecenas sed leo blandit, condimentum ipsum et, aliquam libero. Ut neque lacus, viverra quis ipsum vitae, lobortis rhoncus neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vehicula consectetur
augue, quis iaculis turpis gravida in.
<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci orci, efficitur nec pretium at, iaculis elementum sapien. Etiam id metus quis metus semper ullamcorper nec non dui. Aliquam aliquam tempus orci, eget laoreet erat dignissim
non. Maecenas sed leo blandit, condimentum ipsum et, aliquam libero. Ut neque lacus, viverra quis ipsum vitae, lobortis rhoncus neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vehicula consectetur
augue, quis iaculis turpis gravida in.
</div>
</div>
</div>
&#13;