Как изменить размер изображения по разрешению экрана на html css

Question

Я хочу изменить изображение так, чтобы его размер соответствовал разрешению экрана, например 1920x1080 до 1600x900, используя HTML и CSS.

Как я могу это сделать?

Answer 1

HTML:

<div class="img-div"> 
<img src="path-to-image"> 
</div> 

CSS:

.img-div { height:100%; width:100%;} 
img { max-width:100% } 

Answer 2

Вы можете использовать @media правило или установить размер изображения в процентах.

Answer 3

использование СМИ запрос. Это работает только с разрешением экрана соответствующие

@media only screen and (min-width: 1490px) 
{ 
} 
@media only screen and (max-width: 1490px) and (min-width: 1366px) 
{ 
} 
@media only screen and (max-width: 1366px) and (min-width: 1280px) 
{ 
} 
@media only screen and (max-width: 1280px) and (min-width: 1024px) 
{ 
} 
@media only screen and (max-width: 1024px) and (min-width: 768px) 
{ 
} 

Answer 4

HTML

<img src="path of the image" alt="any message you want to type"> 

CSS

img {width: 15%; height: any numberpx;} 

// убедитесь, что вы даете ширину изображения в процентах, которые будут корректировать изображение в соответствии с размером экрана по высоте, вы можете дать в соответствии с вашими потребностями.