Обрезать изображение, чтобы быть полосой на больших экранах

Question

Все мои изображения должны быть отзывчивыми, поэтому я определил ширину изображения 100%. Но большая часть фотографий становится слишком большой на большом экране, чем iPhone. Эти изображения не должны иметь полную высоту, поэтому я хочу, чтобы они были полосами.

Answer 1

Что вы ищете, так это запросы css media.

В качестве примера:

img {width: 50%;} 

@media only screen 
and (max-device-width : 767px) 
{ 
img {width: 100%;} 
} 

Это позволит сделать ваши изображения ширины 50% на рабочем столе, но на мобильном устройстве с экраном 767px или меньше изображений будет 100% шириной.