Как изменить размер изображения и сохранить масштабируемое

Question

Когда я задаю размер всех jpg с одинаковым размером, макет отлично работает. Но когда они отличаются по размеру, они не очень хорошо вписываются в те divs, которые у меня есть. Я добавил фрагмент кода, который показывает проблему. Последние две картины по вертикали только немного слишком большой

Вот мой HTML и CSS

#firstSection { 
 
    width: 50%; 
 
    float: left; 
 
} 
 
.otherSections { 
 
    width: 25%; 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 
img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
@media only screen and (max-width: 479px) { 
 
    #firstSection, 
 
    .otherSections { 
 
    clear: both; 
 
    width: 100%; 
 
    } 
 
}

<main> 
 
    <section id='firstSection' > 
 
     <img alt="DSC_001.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_001.JPG"/> 
 
    </section> 
 
    <section class='otherSections'> 
 
     <img alt="DSC_002.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_004.jpg"/> 
 
     <img alt="DSC_003.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_005.jpg"/> 
 
    </section> 
 
    <section class='otherSections'> 
 
      <img alt="DSC_002.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_004a.JPG"/> 
 
      <img alt="DSC_003.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_005b.jpg"/> 
 
    </section> 
 
    </main>

Answer 1

Если все ваши изображения имеют одинаковое соотношение ширины и высоты (или, по крайней мере, примерно одинаковое, например, 3: 2 во всех ваших примерах), вы можете сделать это с помощью фоновых изображений и некоторых javascript:

1.) Создание пустых DIVs, установите их ширины до 50% или 25%

2.) Применить фоновые изображения для всех из них, используя background-size: cover и background-repeat: no-repeat

3.) Поскольку DIVs не будет иметь высоту (фон изображения не считаются содержимым), вы должны определить их высоты: получить ширину родительского элемента (окно?) с помощью javascript

4.) Рассчитайте высоту в соответствии с процентом ширины и соотношением изображений и установите его как высоту с помощью javascript. Для широкого DIV 25%, что высота будет parentwidth * 0.25 * 2/3, для широкого DIV 50% parentwidth * 0.5 * 2/3

Сложение:

Вот codepen, где я сделал все, что: http://codepen.io/anon/pen/Bpmxxd

И вот то же самое в сниппета :

parentwidth = $('main').innerWidth(); 
 

 
height1 = parentwidth * 0.5 * 2/3; 
 
    $('#firstSection').height(height1); 
 

 
height2 = parentwidth * 0.25 * 2/3; 
 
    $('.otherSections').height(height2);

main { 
 
    border: 1px solid red; 
 
    overflow: hidden; 
 
} 
 
#firstSection { 
 
    background: url(http://www.sailwbob.com/skipper/public/img/DSC_001.JPG) no-repeat center; 
 
    width: 50%; 
 
    float: left; 
 
} 
 
.x1 { 
 
    background: url(http://www.sailwbob.com/skipper/public/img/DSC_002.JPG) no-repeat center; 
 
} 
 
.x2 { 
 
    background: url(http://www.sailwbob.com/skipper/public/img/DSC_003.JPG) no-repeat center; 
 
} 
 
.x3 { 
 
    background: url(http://www.sailwbob.com/skipper/public/img/DSC_004a.JPG) no-repeat center; 
 
} 
 
.x4 { 
 
    background: url(http://www.sailwbob.com/skipper/public/img/DSC_001.JPG) no-repeat center; 
 
} 
 
.x1, .x2, .x3, .x4 { 
 
    width: 25%; 
 
    float: left; 
 
} 
 

 
#firstSection, .otherSections { 
 
    background-size: cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<main> 
 
    <section id='firstSection'> 
 
    </section> 
 
    <section class='otherSections x1'> 
 
    </section> 
 
    <section class='otherSections x2'> 
 
    </section> 
 
    <section class='otherSections x3'> 
 
    </section> 
 
    <section class='otherSections x4'> 
 
    </section> 
 

 
</main>

Answer 2

можно использовать object-fit:

#firstSection { 
 
    width: 50%; 
 
    height: 100vh; 
 
    overflow: hidden; 
 
} 
 
.otherSections { 
 
    width: 25%; 
 
    height: 100vh; 
 
    overflow: hidden; 
 
} 
 
img { 
 
    display: block; 
 
    width: 100%; 
 
    height: 50%; 
 
    object-fit: cover; 
 
    border: solid; 
 
    box-sizing: border-box; 
 
    object-position: right top; 
 
} 
 
img + img { 
 
    object-position: center center; 
 
    } 
 
#firstSection img { 
 
    height: 100%; 
 
    object-fit: cover; 
 
} 
 
@media only screen and (max-width: 479px) { 
 
    main, 
 
    #firstSection, 
 
    .otherSections { 
 
    clear: both; 
 
    width: 100%; 
 
    display: block; 
 
    height: auto; 
 
    } 
 
} 
 
main { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    height: 100vh; 
 
} 
 
body { 
 
    margin: 0; 
 
}

<script src="http://bfred-it.github.io/object-fit-images/dist/ofi.min.js"></script> 
 
<main> 
 
    <section id='firstSection'> 
 
    <img alt="DSC_001.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_001.JPG" /> 
 
    </section> 
 
    <section class='otherSections'> 
 
    <img alt="DSC_002.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_004.jpg" /> 
 
    <img alt="DSC_003.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_005.jpg" /> 
 
    </section> 
 
    <section class='otherSections'> 
 
    <img alt="DSC_003.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_005b.jpg" /> 
 
    <img alt="DSC_002.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_004a.JPG" /> 
 
    </section> 
 
</main>