web-dev-qa-db-fra.com

Image pleine largeur à hauteur fixe

J'essaie de créer une image ressemblant à l'image de couverture ici , en n'utilisant que css et html. J'ai essayé différentes choses mais rien n'a fonctionné jusqu'à présent.

Ceci est mon code html:

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

Quel code CSS devrais-je utiliser?

htmlcssimagewidthcover
7
Simon

Définissez le width de l'image sur 100% , et le height de l'image s'ajustera de lui-même:

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

Si vous avez unCSSpersonnalisé, alors:

HTML:

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

CSS: 

#image
{
    width: 100%;
}

Aussi, vous pourriez faire File -> View Source la prochaine fois, ou peut-être Google.

16
Cilan

Si vous voulez avoir le même ratio, vous devez créer un conteneur et masquer une partie de l'image.

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

4
danielpenalverramila

Cela peut être fait de plusieurs manières. Je le fais d'habitude de ma classe.

En classe 

.image
{
    width:100%;


}

et pour cela votre html serait:

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

ou si vous voulez le styler en utilisant un style inline, il vous suffira de:

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

Je recommande toutefois de le faire à partir de votre feuille de style externe, car au fur et à mesure de l'avancement de votre projet, vous vous rendrez compte que tout est plus facile à gérer, avec des fichiers séparés pour votre code HTML et votre fichier CSS. 

2
Orville Patterson

Afin de ne pas rayer l'image, vous devrez utiliser:

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

Définissez la hauteur de l'élément parent et donnez-lui la largeur. Puis utilisez une image de fond avec la règle "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>

J'espère que cela servira votre but.

0
Palak Jain

Si vous ne voulez pas perdre le ratio de votre image, ne vous embêtez pas avec height:300px; et utilisez simplement width:100%;.

Si l'image est trop grande, vous devrez la recadrer à l'aide d'un éditeur d'image. 

0
Martin42006