фона ширина изображения 100% высота авто

Question

Я хочу, чтобы достичь такой же, как

<img src=".."> 
img { 
     width: 100%; 
     height: auto; 
     margin-bottom: 15px; 
} 

с background-image. После долгих веков я просто не оставил никаких идей. То, что я пробовал, находится в фрагменте ниже: article header .logo

Что я на самом деле хочу сделать: пусть изображение будет на 100% шириной от родителя (учитывая прокладки) и автоматически масштабирует высоту изображения. Но вместо этого, используя img, я хочу сделать это с помощью div и background-image.

Если мое изображение имеет ширину 100 пикселей и высоту 50 пикселей, а мой родительский контейнер шириной 1000 пикселей (без прокладок), изображение должно быть шириной 1000 пикселей и высотой 500 пикселей, чтобы сохранить соотношение сторон изображения.

---

Вот мой сниппет

article header img { 
 
    width: 100%; 
 
    height: auto; 
 
    margin-bottom: 15px; 
 
} 
 

 
article header .logo { 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: auto; 
 
    background-image: url(http://i.stack.imgur.com/6vggB.png) 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <article class="box"> 
 

 
    <header> 
 
     <img src="http://i.stack.imgur.com/6vggB.png"> 
 
     <div class="logo"></div> 
 
     <a href="#"><h1>Lorem Ipsum!</h1></a> 
 
    </header> 
 

 
    <div class="content"> 
 
     <p>Lorem ipsum dolor sit amet</p> 
 
    </div> 
 
    </article> 
 
</div>

Answer 1

Пожалуйста, напишите следующее code.That исправит проблему.

Вам нужно написать свойство фона размером 100%.

Размер фона: 100%;

Answer 2

Установите прозрачный .png с тем же соотношением сторон, что и изображение, которое вы хотите отобразить на своем месте. Затем установите изображение в качестве фонового изображения. Как так:

.transparent-png { 
    width: 100%; 
    height: auto; 
    background-image: url('path_to_your_target_image'); 
    background-size: cover; 
} 

или в качестве альтернативы, но и несколько Hacky обходной, вы можете установить отступ-топ для: изображения высота/ширина изображения-контейнера * ширина [в процентах от ширины страницы]. Например, с 1600 * 900 изображение, которое вы хотите, чтобы занять весь экран:

div { 
    background-image: url('path_to_my_background_image'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    width: 100%; 
    padding-top: 56.54%; 
} 

Если вы не имеете по крайней мере, соотношение сторон изображения, хотя, то это не представляется возможным в CSS ,

Если вы имеете дело с неизвестными изображениями, вы все равно можете использовать второй метод, но вам нужно будет использовать JavaScript, чтобы получить высоту/ширину изображений, а затем вычислить соответственно.