CSS - 応答的な画像サイズ

Question

私はすべての画像をmax-width: 400px;にすると同時に、応答性がある、つまりモバイルフレンドリーであるようにしようとしています。

以下のスタイリングは画像を反応させましたが、max-width: 100%;は画像のサイズが望みよりもはるかに変化しているため、これは適切な解決策ではありません。私は必要なもの

max-width: 100%; 
Width: auto; 
height: auto; 
border: 1px #DFDFDF solid; /* Just to make the image look nicer */ 

は、これらの線に沿って何か（ただし、応答）である：

max-width: 400px; 
width: auto; 
height: auto; 
border: 1px #DFDFDF solid; /* Just to make the image look nicer */ 

私は多くの異なるものを試してみたが、私はちょうどそれが仕事を得ることができません。

ありがとうございました！

Answer 1

デフォルトでは、画像は親の幅になりますが、その幅を400ピクセルを超えないようにする必要があります。

max-width: 400px; 
width: 100%; 
height: auto; 
border: 1px #DFDFDF solid; /* Just to make the image look nicer */ 

深さにもう少しなるとより多くの制御を持っているために、あなたはこれを分割し、あなたの携帯電話ディスプレイをターゲットにメディアクエリを使用することができます。

// Desktop 
.your-img { 
    max-width:400px; 
    width:100%; 
    height:auto; 
    border:1px solid #dfdfdf; 
} 

// Mobile 
@media (max-width:768px) { 
    .your-img { 
     width:auto;  // Get the original width of the image 
     max-width:100%; // So the image can only be as wide as the device max 
     display:block; // Image becomes a block element 
     margin:0 auto; // Centre image if smaller than device width 
    } 
}