2 бок о бок полная ширина div теги разной ширины (40%/60%), которые уменьшаются до и, в конечном счете, стекаются при 100% ширине

Я пытался и не мог заставить работать следующее.2 бок о бок полная ширина div теги разной ширины (40%/60%), которые уменьшаются до и, в конечном счете, стекаются при 100% ширине

У меня есть два тега div, каждый из которых содержит изображение. Div A слева содержит изображение с собственным размером 768 x 400, Div B справа имеет размер 1152 x 400. Таким образом, эти изображения составляют 40% ширины и 60% ширины.

Я ищу, чтобы они занимали всю ширину экрана и уменьшали их (по-прежнему бок о бок на 40% и 60%) до точки и в конечном итоге складывались друг на друга при 100% полной ширину (скажем, при любом разрешении шириной 720 пикселей), но при этом сохраняя свой собственный коэффициент сжатия. Таким образом, изображение в Div B на самом деле будет «короче», чем Div A в этот момент.

Я попытался проиллюстрировать это приложением.

Любая помощь будет принята с благодарностью.

Спасибо,

https://s13.postimg.org/qq94pfq3b/2_divs.png

источник

2017-02-17 user1154955

вы можете использовать CSS медиа запрос – Uday

Похоже, что вы ищете кого-то, чтобы сделать это для вас. Это очень тривиальный материал, вы пробовали его искать или искать здесь на SO для ответа? –

Можете ли вы предоставить часть своего кода? – Armin

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

HTML:

<div class="a"> 
    <img src="image1.png"> 
</div> 
<div class="b"> 
    <img src="image2.png"> 
</div>

CSS:

.a, .b { float: left; } 
.a img, .b img { width: 100%; } 
.a { width: 40%; } 
.b { width: 60%; } 

@media screen and (max-width: 767px) { 
    .a, .b { width: 100%; } 
}

EDIT:

Я просто заметил, что ваши изображения не имеют такое же отношение. Как вы ожидаете, что они будут бок о бок, как вы предполагали, уважая их родное отношение, как вы писали, не будучи выше, чем другой?

источник

2017-02-17 14:36:38

Спасибо! Это сработало отлично! Масштабирование по-прежнему работает отлично, и изображения сохраняют соотношение сторон (и имеют одинаковую высоту). Вы можете видеть это в «Малой разрешающей способности рабочего стола» 1280 px в ширину части изображения, которое я связал. – user1154955

Вы можете сделать это с помощью bootstrap. Вот небольшой фрагмент кода, который может помочь вам:

.a { 
 
    background-color: blue; 
 
    height: 100px; 
 
} 
 

 
.b { 
 
    background-color: red; 
 
    height: 100px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="a col-xs-12 col-sm-5"></div> 
 
<div class="b col-xs-12 col-sm-7"></div>

источник

2017-02-17 14:40:04 Arkej

2 бок о бок полная ширина div теги разной ширины (40%/60%), которые уменьшаются до и, в конечном счете, стекаются при 100% ширине

ответ

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