Есть ли способ для CSS определить и настроить ширину изображения? - PullRequest
Новая
       9

Есть ли способ для CSS определить и настроить ширину изображения?

2 голосов
/ 28 февраля 2010

Благодаря справке Эрика по моему последнему вопросу, я смог заставить работать мой пример с плавающим символом слева, справа и слева от текста:

http://tanguay.info/web/examples/tablelessItemLayout

alt text
(источник: tanguay.info )

Однако, поскольку изображения имеют различную ширину, мне пришлось немного обмануть, добавив встроенные стили в некоторые теги.

Как я могу изменить этот код так:

  • нет встроенных стилей
  • он поддерживает изображения разной ширины

Код: 

<html>

  <style>

    * { margin: 0; padding: 0 }

    body {
      padding: 20px;
      text-align: center;
      background-color: #333;
    } 

    p {
      margin: 0 0 10px 0;
    }

    #content {
      width: 600px;
      margin-left: auto;
      margin-right: auto;
      background: brown;
      border: 1px solid #555;
      text-align: left;
    }

    .item {
      margin: 20px;
      background-image:url('paperBackground.jpg');
      padding: 20px;
    }

    .itemIcon {
      float:left;         
    }

    .itemIcon p {
      font-size: 8pt;
      margin: 5px 0 0 0;
    }

    .itemBody h1 {
      font-size: 18pt;
      color: brown;
      margin: 0 0 10px 0;
    }

    .clear {
      clear: both;
    }

  </style>

<body>

<div id="content">

  <div class="item">   
    <div class="itemIcon" style="width: 70px; padding-left: -80px">
      <img src="icon.png" alt=""/> 
      <p>This is the caption that is under the image.</p> 
    </div>
    <div class="itemBody" style="margin-left: 80px">    
      <h1>This is the first item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
  </div>

  <div class="item">  
    <div class="itemIcon" style="width: 160px; padding-left: -170px">
      <img src="bigIcon.png" alt=""/> 
      <p>This is the caption that is under the image and it is a very long text so it is going to wrap a couple times here in the left column under the image.</p>  
    </div>
    <div class="itemBody" style="margin-left: 170px">  
      <h1>This is the second item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div>    
  </div> 

</div>

</body>
</html>

Ответы [ 6 ]

1 голос
/ 28 февраля 2010

Вы можете удалить эти пользовательские встроенные поля и отступы, если вместо .itemBody добавить overflow: auto: 

.itemIcon {
    float: left;
    margin-right: 10px;
}
.itemBody {
    overflow: auto;
}

Однако вы не сможете избавиться от этой встроенной ширины на .itemIcon, как это, потому что в CSS нет способа ограничить ширину <p> шириной предшествующего ему изображения , Если у вас есть только изображение, но нет текста, который вам нужен, ширина вам не нужна.

Вы можете вообще избавиться от встроенных стилей, если вы используете таблицы CSS: 

.itemIcon {
    display: table-cell;
    padding-right: 10px;
}
.itemBody {
    display: table-cell;
    vertical-align: top;
    width: 100%;
}

width: 100% на itemBody приводит к уменьшению ширины itemIcon до минимальной ширины, которая определяется шириной изображения. vertical-align: top остановит выравнивание первой строки itemBody с изображением / текстом в itemIcon «столбце таблицы».

0 голосов
/ 28 февраля 2010

За встроенным стилем легко ухаживать. Добавьте класс к .item, как .big, с HTML, например, 

<div class="item big">

и стиль 

.item.big .itemIcon { width: 160px; padding-left: -170px; }
.item.big .itemBody { margin-left: 170px; }

Нет способа динамически изменять числа, используя только CSS. Вы можете использовать JavaScript или серверную функцию для вставки имен классов и тому подобное. Если вы автоматически генерируете изображения, вы справитесь с этим одновременно. Если вы делаете это вручную, добавление класса один раз сделает это намного проще.

0 голосов
/ 28 февраля 2010

OMG все забыли стол :).Я думаю, таблица хорошо подходит для такого рода проблем. 

<div class="item"> 
    <table>
    <tr>
    <td class="image">
    <div class="itemIcon" >
      <img src="icon.png" alt=""/> 
      <p>This is the caption that is under the image.</p>  
    </div>
    </td>
    <td>
    <div class="itemBody" >    
      <h1>This is the first item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    </td>
    </tr>
    </table>
  </div>

td.image {
     vertical-align:top;
    }
0 голосов
/ 28 февраля 2010

CSS, насколько мне известно, не предоставляет никаких средств для условных операторов или логических операций. Это означает, что вы ограничены в своем выборе:

  1. настройки изображения на стороне сервера
  2. настройки на стороне клиента или стиля
  3. с использованием CSS для применения одинаковой ширины к изображениям

Из всего этого я расскажу о пункте три, который предлагает несколько вариантов.

Первый должен использовать:

img {width: 100px; /* or whatever */ }

Второй ограничен работой только с absolute позиционированными изображениями:

img {clip: rect(0 100 100 0); } /* which will take the original image and clip it to the specified dimensions (top, right, bottom, left) */

0 голосов
/ 28 февраля 2010

Я надеюсь, что кто-то может дать вам решение на основе div / css. Но чтобы справиться с изменяющейся шириной изображения, я думаю, вам понадобится одна из следующих четырех вещей:

  • встроенные стили, созданные вручную (как у вас сейчас)
  • встроенные стили, созданные в коде на стороне сервера
  • ширина текстовых блоков корректируется с помощью JavaScript
  • таблица из одной строки для каждого графического и текстового блока

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

0 голосов
/ 28 февраля 2010

Лучшее решение вашей проблемы - динамическое изменение CSS с помощью JavaScript. .width () * JQuery *) позволяет вам делать такие вещи, как получение ширины изображения, а .css () может использоваться для изменения CSS элемента (включая ширину, поле и обивка). Я предлагаю добавить идентификатор для каждого itemIcon и itemBody, а затем использовать событие onload () , чтобы соответствующим образом оформить div.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...