Изменение стиля изображения определенного размера

Question

Как я могу изменить размер изображения, размер которого превышает определенный размер с помощью css. Например, как изменить внешний вид фотографий, ширина которых превышает 300 пикселей.

Answer 1

Некоторые основные сведения о работе с изображениями:

http://www.w3schools.com/w3css/w3css_images.asp

Некоторые возможные способы изменения размера изображения:

Либо стиль изображение через CSS:

img { 
    width:200%; 
} 

Или сделать это с inline css

<img style="width:500px;" src="..."/> 

или использовать HTML атрибуты

<img width="30px" height="auto" src="..."/> 

Как показано здесь, вы можете использовать различные виды блоков тоже. px, %, em, rem, vw некоторые из имеющихся.

медиазапросы

Если вы хотите применить различные стили в зависимости от размера страницы, используйте media queries.

размера изображения зависит вводя в моду

Если вы хотите применять различные стили к изображению в зависимости от его размера источника, я думаю, вы не повезло. Вы можете использовать javascript для этого, но насколько я знаю, нет чистого решения CSS.

Nota Bene

Следует отметить, однако, что ваш вопрос вызывает подозрение, что вы даже не удосужились прибегая к помощи, так как это абсолютно основной HTML/CSS.

Answer 2

Вы можете использовать min ширина/высота и max ширина/высота:

Пример:

p { 
    max-width: 100px; 
} 

Если вы хотите больше контроля и можно использовать media:

<picture> 
    <source srcset="img_smallflower.jpg" media="(max-width: 400px)"> 
    <source srcset="img_flowers.jpg"> 
    <img src="img_flowers.jpg" alt="Flowers"> 
</picture>