<img>の幅と高さをbase64でエンコードされた背景データ比率に従って設定するにはどうすればよいですか？

Question

2列のレイアウトページを作成していて、思考に数時間かかる質問がありましたが失敗しました。

イメージを読み込んでいる間にユーザーが間違ってリンクをクリックしないように、固定された背景でイメージを読み込みたい（リンクをクリックするとイメージが表示され、あなたのマウスポイントが変更されるようにターゲットを絞ってください。その後、別のリンクをクリックすることになります）。そしてbase64の画像は#cccボックスよりも見栄えが良いでしょう。

良く説明するためには、私はそれのために画像をアップロードする：

コードは次のとおりです。

.wrapper { 
 
    text-align:center;margin:30px auto 0;width:410px; 
 
    background:#ffe; 
 
} 
 
.wrapper a {width:49%;display:inline-block;margin:1px} 
 
a {display:inline-block} 
 
b {display:block} 
 

 
.wrapper-desired-look a img { 
 
    width:100%; 
 
    height:105px; 
 
    /* wrapper is 410px 
 
    and 49% of 410 is 201px 
 
    and according to the image ratio, the height is 201*230/440 = 105px 
 
    it can be done via JavaScript but I want to keep it pure CSS way. 
 
    */ 
 
} 
 

 
/* 440 x 230*/ 
 
.wrapper a img { 
 
    background:url("data:image/png;base64,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"); 
 
    background-size:contain; 
 
}

<h2> 
 
The look without fixed width and height 
 
</h2> 
 
<div class="wrapper"> 
 
<a> 
 
    <img src="" alt=" How do I keep the ratio of the pre-set base64 background image? " /> 
 
    <b>Title 1</b> 
 
</a> 
 
<a> 
 
    <img src="" alt="And let it resized to the desired width" /> 
 
    <b>Title 2</b> 
 
</a> 
 
<a> 
 
    <img src="" alt="with pure CSS?" /> 
 
    <b>Title 3</b> 
 
</a> 
 
</div> 
 

 

 
<h2> 
 
The desired look 
 
</h2> 
 
<div class="wrapper-desired-look wrapper"> 
 
<a> 
 
    <img src="" alt=" This look is what I expected " /> 
 
    <b>Title 1</b> 
 
</a> 
 
<a> 
 
    <img src="" alt=" But I need to pre-set the width and height " /> 
 
    <b>Title 2</b> 
 
</a> 
 
<a> 
 
    <img src="" alt=" property in the CSS" /> 
 
    <b>Title 3</b> 
 
</a> 
 
</div>

私はCSSなく所望の外観を得ることができますか？

JavaScriptを使用する必要がある場合、推奨する方法はありますか？ <img>タグが正しい比を持つようにするためには

Answer 1

は、あなたが唯一のbackground-imageとして設定している場合、それは動作しません（src属性にそれをロードする必要があります。だから私は、コンテナ（<a>）とにbackground-imageを移動しましたそれは親の正しい比率を設定しますので、非可視の応答性エレメントとして<img>を置いた。結果はあなたが尋ねたものです。ブラウザのみすべてのオカレンス（srcとbackground-image）のために、一度イメージをロードしますのでご注意ください。

$(window).on('load', function(){ 
 
    $('.wrapper>a').each(function(){ 
 
    imagePath = $(this).css('background-image').replace('url("', '').replace('")',''); 
 
    if (imagePath.length > 0) { 
 
     img = $('<img />', { 
 
     class:'hidden', 
 
     src:imagePath 
 
     }); 
 
     $(this).prepend(img); 
 
    } 
 
    }) 
 
})

.wrapper { 
 
    padding: 1rem; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    text-align: center; 
 
    justify-content: center; 
 
} 
 

 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.wrapper > a >img { 
 
    visibility: hidden; 
 
    z-index: -1; 
 
    position: relative; 
 
    width: 100%; 
 
    height: auto; 
 
    float: left; 
 
} 
 
.wrapper > a > h4 { 
 
    position: absolute; 
 
    bottom: -4rem; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.wrapper > a > .visible-content { 
 
    width: 100%; 
 
    position: absolute; 
 
    font-size: 1.4rem; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.wrapper > a { 
 
    margin: 1rem 1rem 4rem; 
 
    width: calc(50% - 2rem); 
 
    display: block; 
 
    position: relative; 
 
    background:url("data:image/png;base64,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") no-repeat 50% 50% /cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <a> 
 
    <div class="visible-content"> 
 
     How do I keep the ratio of the pre-set base64 background image? 
 
    </div> 
 
    <h4>Title 1</h4> 
 
    </a> 
 
    <a> 
 
    <div class="visible-content"> 
 
     And let it resized to the desired width 
 
    </div> 
 
    <h4>Title 2</h4> 
 
    </a> 
 
    <a> 
 
    <div class="visible-content"> 
 
     with pure CSS? 
 
    </div> 
 
    <h4>Title 2</h4> 
 
    </a> 
 
</div>