it-swarm.com.ru

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

Я пытаюсь создать изображение, похожее на изображение обложки здесь , используя только CSS и HTML. Я пробовал разные вещи, но пока ничего не получалось.

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

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

Какой код CSS я должен использовать?

7
Simon

Установите для изображения width значение 100% , и height изображения изменится сам:

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

Если у вас есть пользовательскийCSS, то:

HTML:

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

CSS: 

#image
{
    width: 100%;
}

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

16
Cilan

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

.container{
  width:100%;
  height:60px;
  overflow:hidden;
}
.img {
  width:100%;
);
<div class="container">
  <img src="http://placehold.it/100x100" class="img" /> 
</div>

   

4
danielpenalverramila

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

Из класса 

.image
{
    width:100%;


}

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

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

или если вы хотите стилизовать его с помощью встроенного стиля, тогда у вас будет просто:

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

Тем не менее, я рекомендую делать это из вашей внешней таблицы стилей, потому что по мере роста вашего проекта вы поймете, что всем этим легче управлять с помощью отдельных файлов для вашего html и вашего css. 

2
Orville Patterson

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

max-height: 200px;
width: auto;
2
raBne

Установите высоту родительского элемента и задайте ширину. Затем используйте фоновое изображение с правилом "background-size: cover"

    .parent {
       background-image: url(../img/team/bgteam.jpg);
       background-repeat: no-repeat;
       background-position: center center;
       -webkit-background-size: cover;
       background-size: cover;
    }
0
Mark
<div id="container">
    <img style="width: 100%; height: 40%;" id="image" src="...">
</div>

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

0
Palak Jain

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

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

0
Martin42006