web-dev-qa-db-ja.com

レスポンシブ画像を同じ高さに保つ方法は？

作成しているWebページがあり、カバー写真とプロフィール写真を並べた1行があります。両方とも異なるサイズのグリッドのbootstrap行にあります。ただし、プロフィール写真は常にカバー写真よりも低く伸びています（高さが高くなっています）。応答性を維持するにはどうすればよいですか。しかし、同じ高さですか？私の最終的な目標は、それらを単一のストリップ（間にパディングがある）のように見せ、ウィンドウがモバイルサイズのときに積み重ねることです。

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

行divの高さを制限し、特定の高さに設定し、bootstrapグリッドをcol-md、またはcol-smにさまざまな比率で切り替えることを試みました。大変感謝いたします。

htmlcssimagetwitter-bootstrapresponsive-design
6
singmotor

それらにmin-heightを使用します

試してみてください

img {
min-height:100%
}

それが機能しない場合は、固定の最大高さを使用してください

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

以下のコードを使用できます。

[〜＃〜] 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リンク http://jsfiddle.net/feh4ex3p/

4
Iqbal

上記のどれも私にはうまくいきませんでしたが、これはうまくいきました：

[〜＃〜] 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