0

ここ数日間、この問題を調査しており、静的レイアウトでうまく機能するいくつかの解決策を見つけましたが、レスポンシブ デザインでの解決に問題があります。

ホームページで使用する一連のバナー画像があり、小さなモバイル画面でテキストの背後にある画像の中央に表示されるようにしています。固定幅でこれを解決できますが、これをレスポンシブにする必要があります。

私の CSS コードの現在のレンディションは次のようになります。

#mainSlideshow .item img {
    display: block;
    width: auto !important;
    max-width: none !important;
    height: 350px !important; 
    overflow: hidden;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform:  translateX(-50%);
-ms-transform:  translateX(-50%);
-o-transform:  translateX(-50%);
transform:  translateX(-50%);
}
#mainSlideshow .item .carouselImgHold {position: relative; }

課題は左への移動のようです。現在、画像は画像幅の 50% だけ左にシフトしています (驚くことではありません)。ネストされた div タグで画像を中央に配置するのに必要な量だけ画像をドリフトするように CSS をプログラムするにはどうすればよいですか?

よろしくお願いします。

4

3 に答える 3

1

例を挙げていただければ幸いですが、試してみましょう。:)

私の提案は、画像background-imageをリンクする代わりに設定することです。したがって、次のようになります。

#mainSlideshow .item{
  background-image:url("path-to-image/image.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

そうすれば、画像が引き伸ばされて画像が覆われることはありません#mainSlideshow .item。詳細はこちら

于 2015-10-01T19:27:39.280 に答える
0

IMG がその行に単独で存在する場合は、text-align と負のマージンを使用できます。

http://codepen.io/anon/pen/PPpYzM

.oversizedImage {
  text-align: center;
}

.oversizedImage img {
  margin: 0 -100%;
}
/* demo purpose */

.oversizedImage {
  width: 50%;
  margin: auto;
  border: solid;
  box-shadow: 0 0 150px 100px white;/* you should use overflow:hidden; here it only shows how much is outside :) */
}

.oversizedImage img {
  vertical-align: top;
  /* instead default baseline to avoid gap under */  
  position: relative;
  z-index: -1;
}
<div class="oversizedImage">
  <img src="http://lorempixel.com/1200/200"/>
</div>

HTML が見つからないため、推測にすぎません

于 2015-10-01T19:31:36.090 に答える