it-swarm.com.de

Wie halte ich reaktionsschnelle Bilder auf gleicher Höhe?

Ich habe eine Webseite, die ich gerade erst erstelle, und ich habe eine Zeile mit einem Titelbild und einem Profilbild nebeneinander. Ich habe sie beide in einer Bootstrap-Reihe in unterschiedlich großen Gittern. Das Profilbild ist jedoch immer niedriger als das Titelbild (die Höhe ist größer). Wie halte ich sie ansprechbar, aber auf gleicher Höhe? Mein ultimatives Ziel ist, dass sie wie ein einzelner Streifen aussehen (mit einem Abstand dazwischen) und dann gestapelt werden, wenn das Fenster mobil ist.

<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>

Ich habe versucht, die Höhe der Zeilendivision einzuschränken, sie auf eine bestimmte Höhe einzustellen und das Bootstrap-Raster auf col-md oder col-sm in verschiedenen Anteilen einzustellen. Jede Weisheit wird sehr geschätzt.

5
singmotor

benutze minimale Höhe für sie

versuchen

img {
min-height:100%
}

wenn dies nicht funktioniert, verwenden Sie eine feste maximale Höhe

img {
min-height:4em;
}
4
Dom Adams

Sie können folgende Codes verwenden.

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-Link http://jsfiddle.net/feh4ex3p/

4
Iqbal

Keines der oben genannten funktionierte für mich, aber das tat:

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*/
}
0
epv