Как управлять с помощью CSS-ширины изображений родительского элемента

в макете для жидкого дизайна Я хотел бы масштабировать изображения, чтобы все они имели одинаковую высоту, но могли иметь разную ширину в зависимости от соотношения сторон изображения. Кроме того, все изображения помещаются в тег привязки. В браузере Mozilla возникает проблема, когда ширина тега привязки не настраивается автоматически. Например, если у изображения будут размеры 200x100px, а высота тега привязки будет 50px, то в Mozilla тег привязки будет иметь размеры 200x50px, а не 100x50px, как я хочу. Каким должен быть мой CSS, чтобы это исправить? СпасибоКак управлять с помощью CSS-ширины изображений родительского элемента

Мой HTML является:

<a class="testimage"><img src="sliderimages/picture8.jpg"/></a>

CSS является:

<style> 
    .testimage {height:10%;display:inline-block;border:1px solid yellow;} 
    .testimage img {height:100%;} 
</style>

источник

2013-03-10 lekso

Можете ли вы привести пример в [jsfiddle] (http://jsfiddle.net)? – sweetamylase

Пожалуйста, также разместите изображение здесь .. (или то же соотношение любое другое изображение) –

Вам нужно сделать несколько простых вычислений с помощью JavaScript. Вот простую HTML-страницу с JavaScript для изменения и тестирования.

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
     Set Image Height 
    </title> 
</head> 

<body> 
    <img src='testimage1.jpg' onload='setImageHeight()'> 
    <img src='testimage2.png' onload='setImageHeight()'> 

    <script> 
     function setImageHeight(event) { 
      // Allow for cross-platform differences 
      event = event || this.event; 
      element = event.target || event.srcElement; 

      var temp = new Image(), 
       fixedHeight = 50, 
       height, width, scaledWidth; 

      temp.src = element.src; 
      width = temp.width; 
      height = temp.height; 
      scaledWidth = width * fixedHeight/height; 

      element.style.width = scaledWidth + "px"; 
      element.style.height = fixedHeight + "px"; 
     } 
    </script> 
</body> 
</html>

Адрес example.

источник

2013-03-10 04:05:24

Привет, Джеймс, я хочу выяснить, как это сделать в CSS. Javascript не является вариантом в этом случае – lekso

CSS не является языком программирования. Это не позволяет делать какие-либо вычисления. Я могу думать о трех альтернативах. (1) Вы катите CSS вручную для каждого изображения в соответствии с его размерами (2) Вы генерируете объявления стиля CSS «на лету» с помощью PHP или какого-либо другого кода на стороне сервера (3) Вы создаете (уменьшенные изображения) изображения для отображения на летать так, чтобы они уже были размером, по которому вы хотите, чтобы они появлялись. –

Попробуйте это .... набор .testimage к display: block; Чтобы задать высоту или ширину тега вы должны применять дисплей блокировать не встроенный блок. Надеюсь, что это сработает.

источник

2013-03-10 04:43:22

он не работает, к сожалению – lekso

Как управлять с помощью CSS-ширины изображений родительского элемента

ответ

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