2015-04-07 5 views
0

На моем Website есть большие изображения (миниатюры). На моем большом экране (1920 x 1080) они выглядят хорошо. Но на моем маленьком экране (1280 x 1024) они выглядят плохо. Стандартный размер - 856 пикселей. Если экран не может справиться с этим, я хочу, чтобы уменьшенный снимок был меньше. Некоторый код:Размер изображения на разрешении экрана css

article .wp-post-image { 
width: 856px; 
height: auto; 
margin-left: 0px; 
margin-top: 3px; 
float: left; 

}

+0

Как кто-то сказал; 'max-width: 100%;' сделает трюк. С учетом сказанного, я взглянул на ваш сайт, и я бы предложил просто сделать 'width: 100%;' по всем направлениям. Поплывший текст выглядит немного грубо на меньших экранах и выглядит более чистым, если вы просто сохраняете изображение на 100%. – MrMarlow

ответ

0

попробовать этот

article .wp-post-image { 
    float: left; 
    height: auto; 
    margin-left: 0; 
    margin-top: 3px; 
    max-width: 100%; 
    width: 856px; 
} 

или

article .wp-post-image { 
     float: left; 
     height: auto; 
     margin-left: 0; 
     margin-top: 3px;    
     width: inherit; 
    } 

или

article .wp-post-image { 
      float: left; 
      height: auto; 
      margin-left: 0; 
      margin-top: 3px;    
      width: 785px; 
     } 
0

Чтобы установить изображение ответно (т.е. andjusting это размеры до размеров контейнера), добавить max-width: 100%; статью .WP-пост-изображение

+0

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

+0

На самом деле это короткий ответ на заданный вопрос. Это то, что хотел OP: «... я хочу, чтобы уменьшенный снимок был меньше». Мой пример кода обязательно сделает то, что он хочет. Если бы он хотел узнать больше, он мог бы самостоятельно искать свойство «max-width». –

0

Это было anwser:

article .wp-post-image { 
float: left; 
height: auto; 
margin-left: 0; 
margin-top: 3px; 
max-width: 100%; 
width: 856px; 
Смежные вопросы