Изображение в разных размерах со средствами массовой информации

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

Кроме того, я использую самозагрузки 3.

Html-код

<div class="widewrapper main"> 
     <img src="dev/img/black_linen_v2.png"> 
</div>

CSS-код:

@import '../bootstrap-3.0.3/bootstrap'; 

/* iPhone 4 (landscape) */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) { 
.widewrapper.main img { 
      margin-top: 75px; 
      height:10px; 
      width: 100%; 
    } 
} 

/* iPhone 4 (portrait) */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) { 
.widewrapper.main img { 
      margin-top: 75px; 
      height:10px; 
      width: 100%; 
    } 
} 

/* iPhone 5 (landscape) */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { 
.widewrapper.main img { 
      margin-top: 75px; 
      height:10px; 
      width: 100%; 
    } 
} 

/* iPhone 5 (portrait) */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { 
.widewrapper.main img { 
      margin-top: 75px; 
      height:10px; 
      width: 100%; 
    } 
} 


/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { 
.widewrapper.main img { 
      margin-top: 75px; 
      height:10px; 
      width: 100%; 
    } 
} 

/* iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
.widewrapper.main img { 
      margin-top: 75px; 
      height:10px; 
      width: 100%; 
    } 
}

Может кто-нибудь мне помочь? Извините за мой плохой английский. Спасибо.

источник

2013-12-20 Yan

У вас одинаковый код в каждом запросе на медиа?

.widewrapper.main img { 
     margin-top: 75px; 
     height:10px; 
     width: 100%; 
}

Таким образом, ваше изображение имеет одинаковый размер .... Вам нужно поместить различные значения в мультимедийные запросы, чтобы увидеть эффект.

Попробуйте изменить ширину изображения, как ширина: 100px или ширину: 75% в различных запросах медиа ..

удалить также атрибут высоты тогда.

источник

2013-12-20 18:39:37 JanBo

Это был просто тест. Но он никогда не меняет высоту. Таким образом, картинка не имеет атрибута 10px. Он показывает мне только размер оргина. – Yan

Попробуйте использовать атрибут width с разными значениями и посмотреть, работает ли он. (удалить высоту, атрибут img изменяет размеры и ширину изображений на основе одного атрибута, сохраняя пропорции изображения, и это может быть причиной того, что вы ничего не видели с тех пор, как указали высоту: 10 пикселей и ширину: 100%) – JanBo

Ah okay thanks. Теперь это работает: D! Это так просто. Я должен попробовать сначала, извините. Я подумал, что если я сделаю это, это покажет мне, что все устройства одинаковой высоты. Но есть новая проблема. Он берет iPhone 4, атрибуты iphone 5 Как я могу это изменить? Я использовал атрибуты разных высот. – Yan

Вы overwritting изображения attribute.So, попытайтесь поместить следующий важный приписывать дать максимум priority.Don't дать важное значение для всех атрибутов ...

например, .widewrapper.main IMG {край -top: 75px! important; height: 10px; width: 100%! important;}

источник

2013-12-21 13:54:19

Изображение в разных размерах со средствами массовой информации

ответ

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