Увеличьте изображение на веб-странице, используя CSS и HTML - PullRequest
Новая
       20

Увеличьте изображение на веб-странице, используя CSS и HTML

0 голосов
/ 15 февраля 2012

Я пытался создать (очень некрасивую) страницу, которая изменяет размеры изображений в зависимости от ширины экрана. Цель состоит в том, чтобы максимизировать изображения таким образом, чтобы все они были одинакового размера.

До сих пор мне удавалось сделать это для двух "ячеек", но по каким-то причинам другие изображения не изменили размер. Все, что мне разрешено использовать, это HTML (5) и CSS. Можете ли вы указать мне правильное направление, пожалуйста?

Обновление: По запросу добавлено jsfiddle: http://jsfiddle.net/mNSLw/

<html>
<head>
<style type="text/css">
body
{
  background-color:#0D8A02;
  text-align:center;
  color: #FFFB00;
}
table
{
  text-align:center;
  border: 2px solid #FFFFFF
}
div.img
{
  margin: 0px;
  border: 1px solid #FFFB00;
  height: auto;
  width: auto;
  text-align: center;
}   
div.img img
{
  display: inline;
  width: 90%;
  height: auto;
  margin: 3px;
  border: 7px solid #FFFB00;
}
div.img a:hover img 
{
  border: 7px solid #FB00FF;
}
div.desc
{
  text-align: center;
  font-weight: normal;
  margin: 5px;
}

.tablex
{
  display:table;
  border-left:5px solid #93FFA4;
  border-right:5px solid #93FFA4;
  text-align:center;
}

.tableheadx
{
  border-top:10px solid #93FFA4;
  border-bottom:10px solid #93FFA4;
  text-align:center;
}

.tablerowx
{
  display:table-row;
  border:3px solid #ff0000;
  text-align:center;
}

.tablecellx
{
  display:table-cell;
  text-align:center;
}
</style>
</head>
<body>
  <div class="tablex">
    <div class="tablerowx">
      <div class="tableheadx">Informatie over Bassano del Grappa</div>
    </div>
    <div class="tablerowx">
      <div class="tablerowx"> 
        <div class="tablecellx">
          <div class="img">
            <a target="_blank" href="klematis2_big.htm"><img src="http://www.w3schools.com/css/klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
            <div class="desc">Ad feugait nostrud lobortis in illum in duis ea nonummy in minim iusto in dignissim. Aliquam feugiat facilisis suscipit ex velit laoreet molestie ut feugait. Lobortis molestie, exerci blandit quis, luptatum tincidunt vero eros luptatum dolore tation erat euismod, ad. Iriure illum dolore qui, velit ullamcorper augue dolore, vel iusto duis lorem nisl enim dolore et eros nulla aliquip. Praesent vel praesent ex feugiat     dolor nostrud eu amet delenit et erat qui iusto, commodo consequat, consequat feugiat. </div>
          </div>
        </div>
        <div style="display:table-cell">
          <div class="tablecellx">
            <div class="img">
              <a target="_blank" href="http://www.w3schools.com/css/klematis2_big.htm"><img src="http://www.w3schools.com/css/klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
              <div class="desc">Add a description of the image here</div>
            </div>
          </div>
          <div class="tablecellx">
            <div class="img">
              <a target="_blank" href="http://www.w3schools.com/css/klematis2_big.htm"><img src="http://www.w3schools.com/css/klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
              <div class="desc">Add a description of the image here</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tablerowx"> 
        <div class="tablecellx">
          <div class="img">
            <a target="_blank" href="http://www.w3schools.com/css/klematis3_big.htm"><img src="http://www.w3schools.com/css/klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a>
            <div class="desc">Add a description of the image here</div>
          </div>
        </div>
        <div class="tablecellx">
          <table>
            <tr>
             <th>Dag</th>
             <th>Vertrektijden</th>
            </tr>
            <tr>
              <td>Maandag</td>
              <td>
                <table>
                  <tr>
                    <td>07.30</td>
                    <td>08.30</td>
                    <td>09.30</td>
                    <td>13.00</td>
                    <td>14.00</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Ответы [ 3 ]

1 голос
/ 15 февраля 2012

Я создал JSfiddle, чтобы ваш HTML работал: http://jsfiddle.net/s97bC/

Я сгенерировал макет с тремя столбцами с Grids960 и использовал только соответствующие части, чтобы вы могли видеть,как это сделано.http://grids.heroku.com/fluid_grid.css?column_amount=3

Вы должны удалить части "display: table-what" из вашего кода, а также удалить все ненужные элементы div.

0 голосов
/ 15 февраля 2012

Никогда не определяйте ширину изображения в пикселях. Процент использования 100% будет работать на всех платформах

0 голосов
/ 15 февраля 2012

CSS3 может изменять размер фоновых изображений до размеров экрана.Это тебе хорошо? 

background: url(‘mtn.jpg’) no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%;/* Safari 3.0 */
-khtml-background-size: 100% 100%; /* Konqueror 3.5.4 */
-moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */

источник

...