如何在html中增加图形图像的高度？

问题描述：

我将一个Plotly图像合并到一个html文件中。我想制作六个盒子，每行三个，然后在每个盒子中放入图像。事情工作正常，但我不能垂直拉伸情节剧情。我试图通过增加像素和％的高度来增加高度，但这只会增加框的大小而不会增加图像的高度。如何在html中增加图形图像的高度？

我使用的CSS主要来自一个帖子在stackoverflow。 CSS: Can a div "float:middle" rather than "float:left;" with margin-left?

HTML文件是：

<!DOCTYPE html> 
<!--It's a best practice to always declare DOCTYPE!--> 
<html lang="en"> 
    <head> 
    <title>Making a Table</title> 
     <meta charset="utf-8"> 
    </head> 
    <body> 
    <header> 
     <h2>Draft template for Presentation</h2> 
     <h1>Plots and maps</h1> 
    </header> 

    <section id="content"> 
      <div class="boxes"> 
      <div class="box leftbox"> 
      <iframe src="https://plot.ly/~shais2267/0/lat-vs-long.embed" frameborder="0" allowfullscreen></iframe> 
      </div> 
      <div class="box"></div> 
      <div class="box rightbox"></div> 
</div> 
       <div class="boxes"> 
      <div class="box leftbox"></div> 
      <div class="box"></div> 
      <div class="box rightbox"></div> 
</div> 
    </section> 
    </body> 
</html>

CSS文件是：

body { 
    background-color: #4ABDAC; 
    color: #FFFFFF; 
    font-family: Georgia, serif; 
} 
header { 
    background-color: #F7B733; 
    height: 75px; 
} 

h1 { 
    padding: 15px; 
} 
h2{ 
    text-align: right; 
    float: right; 
    padding-right: 20px; 
} 
.boxes {width:90%; 
    text-align:center; 
    margin: 5; 
    padding: 5; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: none; 
    margin-bottom: none; 
    border-top: 4px solid #00ccff; 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
    background-color: white; 
    border-bottom: 4px solid #00ccff; 
} 
.boxes .box {width:30%; height:250px; background:#f0f0f0; display:inline-block} 
.leftbox {float:left;height:250px} 
.rightbox {float:right;} 

#content { 
    background-color: #DFDCE3; 
    width: 100%; 
    height: 322px; 
    margin: 0 auto; 
}

这可能在codepen.io找到
https://codepen.io/shammun/pen/xRYaxV

答

可以指定height和width直接在你的iframe，例如

<iframe src="https://plot.ly/~shais2267/0/lat-vs-long.embed" frameborder="0" allowfullscreen height="500px" width="600px"></iframe>

指定通过CSS的height和width是不可能在这种情况下，看到here进行了详细的讨论。

好吧，所以我实际上是在滑动和滑动，iframe中的高度和宽度似乎不起作用。出于这个原因，我使用类和ID来调整图形大小。我用你提到的选项，它没有给我一个适当的对齐图片。我想我将不得不使用class和/或id来正确设置图片。 –

@KoushikChowdhury：查看更新后的答案。 –

刚刚做到了。我使用了以下行： –

答

首先，我永远不会使用iframe，还有其他方法可以更友好地尝试使用符合HTML 5标准的<embed>标签，该标签也具有高度和宽度，并为您提供更明确的目的是做。 http://www.w3schools.com/tags/tag_embed.asp

如何在html中增加图形图像的高度？

相关推荐