Comment garder les images responsives à la même hauteur?

J'ai une page web que je suis en train de faire, et j'ai une ligne avec une photo de couverture et photo de profil côté par côté. J'ai tous les deux dans un bootstrap ligne dans différentes tailles de grilles. Mais, la photo de profil est toujours descendent plus bas que la photo de couverture (c'est la hauteur est plus grande). Comment puis-je rester ouverts, mais à la même hauteur? Mon but ultime est de les avoir à le regarder comme une seule bande (avec un rembourrage entre les deux), puis de la pile lorsque la fenêtre est mobile de la taille d'.

<div class="row">
                    <div class="col-lg-8">
                    <img src="http://placehold.it/851x315" class="img-responsive" alt="Cover Photo">
                    </div>
                    <div class="col-lg-4">
                    <img src="http://placehold.it/200x200" class="img-responsive" alt="Profile Picture">
                    </div>
                </div>

J'ai essayé de limiter la hauteur de la ligne div, un réglage à une hauteur spécifique, et passant le bootstrap grille de col-md, ou col-sm dans des proportions différentes. Toute la sagesse est très apprécié.

OriginalL'auteur singmotor | 2015-01-25

4

utilisation min-height sur eux

essayer
```
img {
min-height:100%
}
```
si cela ne fonctionne pas fixe max-hauteur
```
img {
min-height:4em;
}
```
pourquoi ce travail?
il me semble que cette solution a des problèmes sur les différents parcours (réglage de la largeur de l'image:auto crée des images de grande taille dans IE, de largeur 100% provoque l'étirement des images avec des rapports différents dans la même ligne), sauf si vous définissez flex: de l'image contenant l'image de la largeur/hauteur de l'image. Cela peut être fait par le préprocesseur ou php. Comme ici - codepen.io/blimpage/stylo/obWdgp

OriginalL'auteur Dom Adams
4

Vous pouvez utiliser les codes suivants.

HTML
```
<div class="row cover-row">
    <div class="col-sm-8">
        <img src="http://placehold.it/851x315" class="img-responsive" alt="Cover Photo">
    </div>
    <div class="col-sm-4 profile-wrap">
        <img src="http://placehold.it/200x200" class="img-responsive profile-pic" alt="Profile Picture">
    </div>
</div>
```
CSS
```
/* Desktop and Tablet Screens */
@media (min-width:768px) {
    .cover-row {
        position: relative;
        min-height: 100px; /* minimum height of cover stripe */
    }
    .profile-wrap {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        overflow: hidden;
    }
    .profile-pic {
        width: auto; /* maintain width/height aspect ratio */
        height: 100%;
    }
}
```
JSFiddle lien http://jsfiddle.net/feh4ex3p/

Merci pour la réponse, mais pour une raison quelconque, cela ne fonctionne pas pour moi. copié votre code exactement et je comprends tout cela, mais pour quelque raison il ne fonctionne pas à tous. Photo de profil s'étend toujours plus faible que la photo de couverture
Codes ci-dessus ne fonctionne que pour la largeur de l'écran 768px et au-dessus. Assurez-vous que vous avez testé dans un tel écran. Avis, Dans mon JSFiddle lien, j'ai utilisé col-xs-8 et je n'utilise pas @media (min-width:768px). De sorte qu'il fonctionne pour toutes les tailles d'écran. Ou, à l'image de la pochette/bande est supérieure à 99px.
Oui, j'ai copié le code de la js fiddle et il ne parvient toujours pas à la ligne. Sur inspecter l'élément, Il ressemble à la photo de couverture div est également correspondant à la hauteur de la photo de profil, mais la photo de la pochette elle-même ne l'est pas.
Avez-vous appeler Bootstrap CSS avant compte tenu de code CSS? <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
Oui, bootstrap est la première feuille de style importée, ma feuille de style personnalisée (où j'ai ajouté ton code) est le dernier/plus récentes

OriginalL'auteur Iqbal

Aucun des ci-dessus a fonctionné pour moi, mais ce n':

HTML

<div class="row cover-row">
<div class="col-sm-8">
    <img src="http://placehold.it/851x315" class="img-responsive" alt="Cover Photo">
</div>
<div class="col-sm-4 profile-wrap">
    <img src="http://placehold.it/200x200" class="img-responsive profile-pic" alt="Profile Picture">
</div>

CSS

.profile-pic {
    width: 100%; /* maintain width/height aspect ratio */
    height: 500px; /*I realized this doesnt seem responsive, but no percentages work for me but it appears fine on mobile*/
}

OriginalL'auteur epv

Vous devez vous connecter pour publier un commentaire.