画像サイズが異なるブラウザ

Question

ウェブサイトの.img要素にCSSスタイルを作成しました：www.piyarawatan.com ウェブページの右側のバーには、検索ボックスの下にある新聞のプレビュー画像があります。私はこのウェブページをFirefoxで開くと非常にうまく動作していますが、画像サイズは必要なだけですが、Google Chromeで同じウェブページを開くと画像の高さが非常に長くなり、幅が縮小します。何が問題ですか？私のCSSに問題はありますか？どうすれば修正できますか？ありがとう

img[Attributes Style] { 
    height: 150%; 
    width: 100%; 
} 

li { 
    display: list-item; 
    text-align: -webkit-match-parent; 
} 

Answer 1

<img>タグにはwidthとheight属性を入れないでください。

<img class="some-name" /> 

そして、単純に以下のCSSを追加します：

.some-name { 
    width: 100%; 
} 

すなわち、私は何だろうと、このような画像要素にクラスを追加することです単純に画像要素から幅と高さを削除し、上で説明したようなCSSクラスを追加します。 width: 100%を実行することにより、対象となる要素は親要素の最大幅を継承します。