Позиционирование изображения CSS (квадрат)

Question

У меня есть 4 изображения на моем веб-сайте, я пытаюсь расположить его так, чтобы все они образовывали равный квадрат внутри моего DIV, однако он выходит как вертикальная линия из 4 изображений. Я хочу, чтобы он выглядел как две вертикальные линии из двух изображений рядом друг с другом, делая его квадратным с 4 изображениями. Пожалуйста, сообщите, как я этого достиг.

<div id="main-content" class="group"> 
    <img src="mg.jpg" title="MG" alt="Car" style="max-width:50%; 
max-height:50%;"> 
    <img src="4x4.jpg" title="MG" alt="Car" style="max-width:50%; 
max-height:50%;"> 
    <img src="audi.jpg" title="MG" alt="Car" style="max-width:50%; 
max-height:50%;"> 
    <img src="ford.jpg" title="MG" alt="Car" style="max-width:50%; 
max-height:50%;"> 
</div> 


#main-content { 
    max-width:1000px; 
    width:66.6667%; 
    float:right; 
    min-height:1000px; 
    height:100%; 
    color:white; 
    background-color: #0D3D56; 
} 

Примечания: Причина ширина устанавливается на 66.6667%, потому что есть еще один DIV на той же странице, покрывающей остальную часть ширины.

Я делаю этот сайт с отзывчивым дизайном.

Answer 1

JSFiddle Сначала я вымыл несколько общих ошибок. Например, ваши теги img должны выглядеть как <img src=""/> с косой чертой. Затем я создал css, чтобы рассказать всем изображениям о половине ширины и высоты div.

<div id="main-content" class="group"> 
    <img src="mg.jpg" title="MG" alt="MG"/> 
    <img src="4x4.jpg" title="4x4" alt="4x4"/> 
    <img src="audi.jpg" title="Audi" alt="Audi"/> 
    <img src="ford.jpg" title="Ford" alt="Ford"/> 
</div> 

#main-content { 
    width:66.67%; 
    float:right; 
    min-height:1000px; 
    height:100%; 
    color:white; 
    background-color: #0D3D56; 
} 
img { 
    float:left; 
    width: 50%; 
    height: 50%; 
} 

Answer 2

Я только что отредактировал встроенный стиль для изображений.

Используйте следующее:

#main-content { 
 
max-width:1000px; 
 
width:66.6667%; 
 
float:right; 
 
min-height:1000px; 
 
height:100%; 
 
color:white; 
 
background-color: #0D3D56; 
 
}

<div id="main-content" class="group"> 
 
<img src="mg.jpg" title="MG" alt="Car" style="width:50%; max-width:50%; max-height:50%;" /> 
 
<img src="4x4.jpg" title="MG" alt="Car" style="width:50%; max-width:50%; max-height:50%;" /> 
 
<img src="audi.jpg" title="MG" alt="Car" style="width:50%; max-width:50%; max-height:50%;" /> 
 
<img src="ford.jpg" title="MG" alt="Car" style="width:50%; max-width:50%; max-height:50%;" /> 
 
</div>

Answer 3

Хорошо Простейшее решение: 1. Перейдите getuikit.com и скачать эту вещь 2. Ссылка соответствующий CSS, JS и jquery.js (Google, вы можете скачать его с jQuery.com) 3. Получите общий div для всех 4 изображений и установите его класс как «uk-grid». 4. Задайте класс каждого изображения как «uk-width-medium-1-2», вы можете изменить среднюю часть на маленькую или большой по вашему вкусу. 5. ??? 6. Прибыль. Теперь у вас есть набор позиционирования изображения, который реагирует и будет складываться, когда вы смотрите на него на меньшем экране.