Отзывчивый дизайн - изображения не масштабируются пропорционально

У меня есть расположение колонны с тремя колонками, каждая колонка% ширины.
Содержание левого и правого столбцов - это просто изображения, которые масштабируются вверх/вниз по мере необходимости при изменении размера браузера.Отзывчивый дизайн - изображения не масштабируются пропорционально

В центральной колонке у меня есть область заголовка с фоновым изображением, с изображением логотипа и текстовым изображением поверх фонового изображения.

Фоновое изображение, логотип и текстовое изображение Все размеры с изменением размера браузера, однако не пропорциональны друг другу.

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

Вы можете увидеть здесь работать: http://jsfiddle.net/james2014/KSq5j/embedded/result/

Если вы медленно изменять размер вашего браузера, вы можете увидеть все изображения начинают сворачивать, но логотип (зеленая вещь с «все» в нем) становится слишком мал для синего фона, как и текст.

И код, в JSFiddle: http://jsfiddle.net/james2014/KSq5j/

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

Я пробовал в течение нескольких дней с разными CSS, размером фона, разными ширинами и размерами изображений. Может ли кто-нибудь предложить, что может понадобиться в CSS? Я бы рассмотрел новый подход, без фонового изображения, огромного, если есть решение с этим тоже.

Вот код: HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <title>3 column responsive</title> 
    <link rel='stylesheet' type='text/css' href='style.css'> 
    </head> 
<body> 

<!-- MASTER LEFT COLUMN --> 
<div id="master-column-left"> 
    <img src="http://s27.postimg.org/umuoxsb6b/site_left_image.png"> 
</div> 


<!-- MASTER CENTRE COLUMN --> 
<div id="master-column-centre"> 

    <!-- Header --> 
    <div id="header-centre"> 

    <!-- Logo --> 
    <div id="main-top-logo"> 
     <img src="http://s27.postimg.org/40i88t6z3/logo.png"> 
    </div> 

    <!-- Some Text --> 
    <div id="some-text"> 
     <img src="http://s27.postimg.org/a05zcgrrj/some_text.png"> 
    </div> 

    <div style="clear-both"></div> 

    </div> 
    <!-- end Header --> 

</div> 
<!-- end MASTER LEFT COLUMN --> 


<!-- MASTER COLUMN RIGHT --> 
<div id="master-column-right"> 
    <img src="http://s27.postimg.org/68weq5e37/site_right_image.png"> 
</div> 

<div class="clear-both"></div> 

</body> 
</html>

CSS

body 
    { 
    margin: 0; padding: 0; 
    } 

img { max-width: 100%; height: auto; } 

/** COLUMN WRAPS **/ 
#master-column-left 
    { 
    width: 20%; 
    float: left; 
    } 
#master-column-centre 
    { 
    width: 59.5%; 
    float: left; 
    } 
#master-column-right 
    { 
    width: 20%; 
    float: left; 
    } 

/** HEADER **/ 
#header-centre 
    { 
    float: left; 
    width: 100%; 
    padding: 0 0 1.3em 0; 
    background-image: url('http://s27.postimg.org/guga25ker/content_header_image.png'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    border-top: 1px solid #4c6623; 
    } 

/** LOGO **/ 
#main-top-logo 
    { 
    float: left; 
    width: 10%; 
    margin: 1.3em 0 0 2em; 
    } 
/** TEXT **/ 
#some-text 
    { 
    float: left; 
    margin: 2.3em 0 0 9em; 
    width: 28%; 
    }

источник

2014-04-13 James

Я использовал JQuery, чтобы сохранить высоту все же в этом обновленном FIDDLE.

Но я не уверен, что это действительно оптимально.

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

Редактировать: Если вы сделали центральную заголовок изображения, ее можно было бы обработать так же, как и другие два изображения.

Я уверен, что другие будут перекликаться с лучшими идеями.

var bikeheight = 0; 
bikeheight = $('#master-column-left img').height(); 
$('#header-centre').css('height', bikeheight-22); 

$(window).resize(function(){ 
    bikeheight = $('#master-column-left img').height(); 
    $('.putmehere').html(bikeheight); 
    $('#header-centre').css('height', bikeheight-22); 
});

Edit 2: Мы можем иметь решение, основанное на этой прекрасной странице: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Вот является FIDDLE.

источник

2014-04-13 16:12:52 TimSPQR

Эй, Тим, спасибо за то, что искали и идеи. JQuery примерно прав, логотип остается того же размера. Tho заголовок img является полным размером, и я не хотел начинать с JQuery (не будучи осведомленным о нем). Вы сделали хорошую идею, сделав центральным заголовком одно изображение. Я поиграл с этим, но действительно хотел отдельных изображений (очевидные причины). Это становится более сложным, чем необходимо, поэтому я могу пойти с этой идеей * если * игра с кодом из ссылки mademyday не работает. Вам нужно немного времени, чтобы поиграть с ним. Еще раз спасибо. – James

Для всех, кто заканчивается здесь с аналогичной проблемой.

Ответ TimSPQR был очень полезным, давал пищу для размышлений и, безусловно, мог решить проблемы других.

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

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

источник

2014-04-15 13:59:40 James

Отзывчивый дизайн - изображения не масштабируются пропорционально

ответ

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