画像を固定解像度に適合させる方法はありますか？奇妙に見えるべきではありませんか？

Question

私は文字通り、ポートレート画像を撮って横長の大きさにして、余分な背景を付けて画像を奇妙に見せないようにしているようなものですか？例えば

この1つは、元の画像です：

そして今ここにそれが原因私のように固定値に高さ&幅を設定しているという事実に歪んだ：そうです

この肖像画の写真を、すべてが完璧に見える景観の写真に変える方法はありません。単に解像度を変えるだけではなく、文字通りそこにある写真のサイズを変更し、余分なバックグラウンド画像が奇妙に見えないように画像にound？

HTML、CSS、PHP、JSでは可能ですか？

Answer 1

他の回答のすべてがそれを示唆していても、私は穀物に対して行くつもりですし、私はそれは、各画像のためのCSSルールを追加するには、この場合には適切だとは思わないと言いますそれはあなたが何らかのギャラリーを作成しているように見えるからです。それはちょうどあなたのHTML内<img>タグの権利とあなたが動的に過度に物事を複雑にすることなくsrcを生成することができる方法を使用することがおそらく良いでしょう：

.container { 
 
    border: 1px solid #777; 
 
    text-align: center; 
 
    padding: 10px; 
 
    margin: 10px; 
 
} 
 
.container img { 
 
    max-height:100%; 
 
    max-width: 100%; 
 
    vertical-align: middle; 
 
} 
 
.helper { 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
}

<div class='container' style="width:200px;height:200px"> 
 
    <span class="helper"></span><img src="https://i.stack.imgur.com/5ZNYR.png"> 
 
</div> 
 
<div class='container' style="width:400px;height:200px"> 
 
    <span class="helper"></span><img src="https://i.stack.imgur.com/5ZNYR.png"> 
 
</div> 
 
<div class='container' style="width:200px;height:400px"> 
 
    <span class="helper"></span><img src="https://i.stack.imgur.com/5ZNYR.png"> 
 
</div>

ちょうどあなたが任意の空白を持っていないことを確認してください.helperとimgの間です。それはコンテナとイメージの任意の次元で機能するはずです。

Answer 2

HTML

<div class="img-con"> 
<img src="http://www.mybligr.com/wp-content/uploads/2017/01/most-beautiful-tiger-animals-pics-images-photos-pictures-6.jpg" alt="" /> 
</div> 

CSSここ

.img-con 
{ 
    height:300px; 
    width:500px; 
    border:1px solid black; 
    position: relative; 
    max-height:300px; 
    max-width:500px; 
    padding:30px; 
} 

.img-con > img 
{ 
    position: absolute; 
    left:0; 
    right: 0; 
    top:0; 
    bottom:0; 
    margin:auto; 
    max-height:inherit; 
    max-width:inherit; 
} 

は、参照リンクは、これはそれがの歪みなしに収まるようにするために画像のサイズを変更しますcodepn link here

Answer 3

あり、ここで、このコードを試してみてください比率。

.container { 
 
width: 200px; 
 
    height: 100px; 
 
    background-image: url("https://i.stack.imgur.com/5ZNYR.png"); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
    background-color: blue; 
 
}

<div class='container'></div>