Изображение полной ширины с фиксированной высотой

Я пытаюсь создать изображение, похожее на изображение обложки here, используя только css и html. Я пробовал разные вещи, но до сих пор ничего не получилось.Изображение полной ширины с фиксированной высотой

Это мой HTML-код:

<div id="container"> 
    <img id="image" src="..."> 
</div>

Что CSS код, который я должен использовать?

источник

2013-12-24 Simon

Пожалуйста, покажите, что вы пробовали для css. – eebbesen

Установка изображения в ширина до 100% и высоты изображения будет скорректирован:

<img style="width:100%;" id="image" src="...">

Если у вас есть собственный CSS, то:

HTML:

<img id="image" src="...">

CSS:

#image 
{ 
    width: 100%; 
}

Кроме того, вы можете сделать File -> View Source в следующий раз, или, возможно, Google.

источник

2013-12-24 16:06:08 Cilan

Thanx для быстрого ответа :) Но если я использую этот код, я теряю соотношение изображения. – Simon

@ user3132912 Сообщение отредактировано, просто удалите 'height: 50px' – Cilan

@ user3132912 Кроме того, я сделал небольшую ошибку кодирования, я изменил' .image' на '# image', поэтому используйте' # image'. Кроме того, высота будет автоматически настраиваться, я надеюсь, что это исправит вашу проблему. – Cilan

вы можете сделать это в оба конца.

<div> 
    <img src="..." style="width: 100%" height="300" /> 
</div>

img { 
    width:100%; 
    height:300px; 
}

источник

2013-12-24 16:10:54

@Alex Нет, это не так. –

это абсолютно не работает, пожалуйста, сначала прочитайте вопрос, а затем ответьте простым кодом – wegginho

Это можно сделать несколькими способами. Обычно я делаю это из своего класса.

От класса

.image 
{ 
    width:100%; 


}

и для этого ваш HTML будет:

<img class="image" src="images/image_name">

или если вы хотите, чтобы стиль его с помощью встроенного стиль, то вы бы просто:

<img style="width:100%; height:60px" id="image" src="images/image_name">

Я, однако, рекомендую делать это со своего внешнего стиля, потому что по мере роста вашего проекта вы поймете, что entir e проще управлять отдельными файлами для вашего html и вашего css.

источник

2013-12-24 16:15:48

Thanx, но если я использую этот код, я потеряю соотношение изображения. – Simon

Затем просто удалите свойство высоты.Я видел, как ты сделал комментарий после того, как я ответил. –

Я отредактировал мой код, так что теперь он должен хорошо работать –

Если вы не хотите потерять соотношение своего изображения, то не беспокойтесь height:300px; и просто используйте width:100%;.

Если изображение слишком велико, вам придется обрезать его с помощью редактора изображений.

источник

2013-12-24 16:18:05 Martin42006

Не просто посмотреть комментарий от ответа, который я отредактировал, а затем отредактировал, поэтому он показывает * этот * ответ, просто в надежде, что вы получите галочку ... – Cilan

извините, когда я начал писать этот ваш комментарий wasn Там. я бы добавил комментарий, но я наклоняю, так как у меня еще нет 50 rep. Я не пыталась взять кредит на работу. – Martin42006

О, ладно тогда ... – Cilan

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

.container{ 
 
    width:100%; 
 
    height:60px; 
 
    overflow:hidden; 
 
} 
 
.img { 
 
    width:100%; 
 
);

<div class="container"> 
 
    <img src="http://placehold.it/100x100" class="img" /> 
 
</div>

источник

2016-11-07 09:55:04 danielpenalverramila

Установите высоту родительского элемента, и дать тем, что ширина. Затем используйте фоновое изображение с правилом «фон-размер: крышка»

.parent { 
     background-image: url(../img/team/bgteam.jpg); 
     background-repeat: no-repeat; 
     background-position: center center; 
     -webkit-background-size: cover; 
     background-size: cover; 
    }

источник

2016-11-07 10:41:24 Mark

Чтобы не поцарапать изображение, нужно будет использовать:

max-height: 200px; 
width: auto;

источник

2016-11-24 14:43:47 raBne

спасибо, это сделал трюк – Danish

Я рад, что смог помочь :) – raBne

<div id="container"> 
    <img style="width: 100%; height: 40%;" id="image" src="..."> 
</div>

Я надеюсь, что это будет служить вашей цели.

источник

2018-01-16 18:59:56

Изображение полной ширины с фиксированной высотой

ответ

Смежные вопросы