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

в макете с плавным дизайном я хотел бы масштабировать изображения так, чтобы все они имели одинаковую высоту, но могли иметь разную ширину в зависимости от соотношения сторон изображения. Кроме того, все изображения находятся внутри тега привязки. В браузере Mozilla у меня возникает проблема, когда ширина тега привязки не регулируется автоматически. Например, если размер изображения будет 200x100px, а высота тега привязки будет 50px, то в Mozilla тег привязки будет иметь размеры 200x50px, а не 100x50px, как я хочу. Каким должен быть мой 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>

css width fluid-layout
person lekso    schedule 10.03.2013    source источник
comment
Можете ли вы включить пример в jsfiddle?   -  person Amy    schedule 10.03.2013
comment
Пожалуйста, также разместите изображение здесь .. (или такое же соотношение с любым другим изображением)   -  person Mr_Green    schedule 10.03.2013

Ответы (2)


arrow_upward
0
arrow_downward

Вам нужно сделать несколько простых вычислений с помощью 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>

Вот пример.

person James Newton    schedule 10.03.2013
comment
Привет, Джеймс, я хочу понять, как это сделать в CSS. Javascript не вариант в этом случае - person lekso; 10.03.2013
comment
CSS — это не язык программирования. Он не позволяет производить какие-либо расчеты. Я могу придумать три альтернативы. (1) Вы вручную прокручиваете CSS для каждого изображения в соответствии с его размерами (2) Вы генерируете объявления стилей CSS на лету, используя PHP или какой-либо другой код на стороне сервера (3) Вы генерируете (миниатюры) изображения для отображения на летите так, чтобы они уже были того размера, в котором вы хотите, чтобы они появились. - person James Newton; 10.03.2013

arrow_upward
0
arrow_downward

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

person Bhojendra Rauniyar    schedule 10.03.2013