0

Blogger でまた問題が発生しました。開始ページをスタイリングしています。スニペットとタイトルをタイルで表示したいのですが、高さは固定 (200 ピクセル) ですが、幅は動的であるため、レスポンシブに動作しています。

ホバーすると、背景と「続きを読む」ボタンとして最初の画像を表示したいと思います。使えないので

background: url(data:post.firstImageUrl);

イメージタグを使用して解決策を見つける必要があります。

私のフォールバックは、背景として定義されており、背景サイズのコンテンツが追加されているため、うまく機能します。

私がプレビュー画像で達成しようとしているのは、背景サイズのカバーが機能するような外観です.

使ってみた

img{
  height: 100%
  min-width: 100%; 
}

しかし、うまくいきませんでした。領域全体が覆われていますが、画像は引き伸ばされており、正しい縦横比で拡大縮小されていません。

どうすればそれを機能させることができるか、誰かがアイデアを持っていることを本当に願っています。CSSのみの解決策が最善ですが、javascriptでできることがあれば、それもいただければ幸いです

ここに私のテストブログがあります: http://einneuertestblog.blogspot.ch/

4

3 に答える 3

2

もしあなたがそうするなら ：

img {
    height: 100%;
    min-width: 100%;
}

コンテナの幅の少なくとも 100%、常にコンテナの高さの 100% になるように画像を指定します。

これらを試してください：

/* 1OO% of the container's width and proportional height */
img {
    width: 100%;
    height: auto;
}

/* 1OO% of the container's height and proportional width */
img {
    width: auto;
    height: 100%;
}

/* 1OO% of the image's original width maximum and proportional height, resize the image down if needed but prevent the image to be bigger than its original size */
img {
    max-width: 100%;
    height: auto;
};
于 2013-09-01T17:44:19.880 に答える