Отзывчивый образ с CSS для меньших экранов

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

.image-wrapper { 
    max-width: 100%; 
    height: auto; 
    display: inline-block; 
} 

<figure> 
    <img class="image-wrapper" src="~/Images/Q.gif" /> 
    <img class="image-wrapper" src="~/Images/H.gif" /> 
    </figure>

источник

2013-12-06 user2707092

Вы можете достичь этого с помощью медиа запросов. Попробуйте что-то вроде этого:

@media (max-width : 320px) { 

    .image-wrapper { 
    width: 100%; 
    height: auto; 
    display: block; 
    } 
} 
@media (min-width : 320px) { 
    .image-wrapper { 
    width: 50%; 
    height: auto; 
    display: inline-block; 
    } 
}

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

источник

2013-12-06 07:32:16

Я использую только медийные запросы. Изображения становятся сжатыми, когда я изменяю размер окна, это означает, что css работает. Но все же я не получаю результат. – user2707092

До ширины 480 он уже работает. Я хочу, чтобы размер меньшего размера около 320 для телефонов Apple – user2707092

@ user2707092, поэтому вы хотите изменить один макет столбца, когда ширина составляет 320 пикселей или меньше? Затем просто измените «480px» в примере кода, который я разместил на «320px». См. Мой отредактированный пост. –

попробовать с помощью media queries, они будут распространяться только на небольших экранах

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

источник

2013-12-06 07:20:52 roo2

Отзывчивый образ с CSS для меньших экранов

ответ

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