Изменение размера изображения автоматически при изменении размера окна

Question

Я показываю несколько типов ввода = изображение. Изображения отображаются так, как я хочу, чтобы они были в большем окне, но когда окно сжимается, как на телефоне, изображение/строка изменяется, но не размер каждого изображения. Я опубликовал аналогичный вопрос и ему сказали использовать display: inline-flex, но когда я попробую, в этом случае макет в большем окне не будет разнесен, как я хочу.

Таким образом, я стараюсь, чтобы все изображения уменьшались при размере окна, но также сохраняли макет, в котором они находятся, - равномерно распределенные по строкам.

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

jsfiddle

.imgStr {display:inline-block; } 
    .imgInput {width:100px; max-width:100px;} 
    img{border:solid 1px #9a9a9a; margin:10px;} 
    .selected{ box-shadow:0px 12px 22px 1px #333 } 

    .transition { 
    -webkit-transform: scale(1.6); 
    -moz-transform: scale(1.6); 
    -o-transform: scale(1.6); 
    transform: scale(1.6); 
    } 
    #enlarge { 
    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
    } 
    #enlarge { margin:0px; } 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

    <div class="imgStr shadow"><center><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Beige</center></div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Black</div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br />Blue</div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Navy</div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Baby Blue</div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Chocolate</div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Dark Grey</div> 

Answer 1

Для CSS только решение , вы ищете @media-query (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries):

<style> 
.your-image { 
    transition: all 0.5s ease; 
    width: 200px; 
} 

@media (max-width: 600px) { 
    .your-image { 
    width: 100px; 
    } 
} 
</style> 

Это говорит, что «если окно ширина менее 600 пикселей, изображения с классом your-image должны иметь разную ширину ».

---

ИМО решение CSS довольно чистый, но если вы хотите использовать Javascript, вы могли бы сделать что-то вроде:

function foo() { 
    ...do your resizing here... 
} 

window.addEventListener('resize', foo); 

Answer 2

Насколько я понимаю, вы хотите иметь адаптивные изображения, которые растут и сжиматься, связанные с размером окна пользователей.

Я не уверен, что есть простой способ сделать это в обычном css, но Bootstrap (к счастью) имеет это встроенное!

<img src="foo.jpg" class="img-responsive"> 

просто добавить класс «IMG-отзывчивым» к изображению, она будет реагировать & масштаб до размера элемента любого родителя это в.

Bootstrap responsive image documentation