Как увеличить высоту графического изображения в 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>

Файл КСС:

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

источник

2016-12-04 Koushik Chowdhury

Вы можете указать height и width прямо в вашем iframe, т.е.

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

Указание height и width с помощью CSS не представляется возможным в данном случае, см here для детального обсуждения.

источник

2016-12-04 11:53:53

ОК, так что я на самом деле делаю это в slidify и в slidify, высоте и ширине внутри iframe, похоже, не работает. По этой причине я использую классы и идентификаторы для корректировки размера фигуры. Я использовал вариант, который вы упомянули, и он не дал мне правильную выровненную картинку. Я думаю, что мне нужно будет использовать класс и/или идентификаторы, чтобы правильно установить изображение. –

@ KoushikChowdhury: см. Обновленный ответ. –

Только что это произошло. Я использовал следующую строку: –

Прежде всего, я бы никогда не использовал iframe, есть другие способы сделать это более дружелюбно, попробуйте вместо этого использовать HTML 5-совместимый тег <embed>, который также имеет высоту и ширину и дает более четкую цель в отношении того, что вы делаем. http://www.w3schools.com/tags/tag_embed.asp

источник

2016-12-07 05:00:15

Как увеличить высоту графического изображения в html?

ответ

Смежные вопросы