图像显示不正确,应该是垂直的

时间:2017-03-15 12:28:40

标签: html css

以下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>

picture displaying horizontally

有什么方法可以解决这个问题吗?

2 个答案:

答案 0 :(得分:0)

代码没有错。这是形象。使用本地的图像,它的工作原理。我已经改变了图像,它看起来很好

&#13;
&#13;
  <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;
&#13;
&#13;

答案 1 :(得分:0)

旋转它

<强> DEMO HERE

DEMO HERE TOO

&#13;
&#13;
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;
&#13;
&#13;