Как уменьшить размер изображения при уменьшении размера браузера.?

Question

Я вставил изображение через css. Когда я уменьшаю размер окна браузера, размер изображения остается таким же, как уменьшить размер изображения.

Я закодирован как следующее:

<div id="main-content"> 
    <br/> 
    <div id="slideshow"> 

    </div> 
</div> 

CSS следующим образом:

#slideshow{ 
    background:url(img/image.png) no-repeat; 
    height:512px; 
    /*margin:auto 30px;*/ 
    margin:40px 28px auto; 
    position:relative; 
} 

я сделал Google очень много. Но я не понимаю, как решить эту проблему. Пожалуйста, любой может помочь мне решить эту проблему. Заранее спасибо ..

Answer 1

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

#slideshow{ 
    background:url(res/iphone_small.png) no-repeat; 
    height:50%; 
    /*margin:auto 30px;*/ 
    margin:40px 28px auto; 
    position:relative; 
} 

Answer 2

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

Вы можете использовать background-size, чтобы изменить размер фона при изменении элемента. Некоторые значения: Возможное

background-size: cover; 
background-size: contain; 
background-size: 100%; 
background-size: 200px 300px; 

Я обычно использую крышку или содержат, как подходит изображение для контейнера, по-разному. Попробуйте.

Более подробную информацию о фон-размер: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 3

использование CSS фон свойство масштабировать изображение

#slideshow { 
background-size:cover;}