画像の中心を表示＋左右に10pxの余白を設ける

現在、画像のレスポンシブ対応に取り組んでおります。
以下の条件を達成したいのですが、まったくうまくいきません。
お力添えいただけたらと思います。
宜しくお願いいたします。

【条件】
・heightは常に529px
・横幅は画面幅に応じて収縮するが、画像の中心がずれない
・widthは100％
・左右と上にmarginを10px設ける
（画像サイズは横1300px、縦511pxです。）
（参考サイトhttp://www.coolwebwindow.com/csstips/csstechnic/templatelayout/000347.php
https://create.irec.jp/sample02/）
※この画像をjQueryプラグインのbxSliderで使用しようと考えております。

〜現在の状況～

HTML
1<div class="image">
2 <img src="images/img1.jpg" alt="画像">
3</div>

CSS
1.image {
2  position:relative;
3  overflow:hidden;
4  width:100%;
5  height:529px;
6}
7.image img {
8  position:absolute;
9  left:50%;
10  width:1300px;
11  height:529px;
12  margin-left:-650px;
13}

kei344

2019/01/16 06:29

（質問文は編集できます）「heightは常に529px」であれば左右が切れることになりますが、どのように表示したいのでしょうか。また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

sonnani1374

2019/01/16 15:04

失礼いたしました。訂正させていただきました。表示したい内容は、上・左右に10pxの余白を設け、また、画面を小すると画像の中心が変わらず、左右が画面サイズに合わせて非表示になる、という設定です。また、画像のheightは529px（またはそれに近い値）で固定。 jQueryプラグインのbxSliderの画像に上記を使用しようと考えております。宜しくお願いいたします。

sonnani1374

2019/01/16 15:09

画面縮小時にこのような動きをする画像を上・左右に10pxの余白をいれ、bxSliderで使用したいと考えております。 https://create.irec.jp/sample02/

行動規範の内容に同意します

回答2件

ベストアンサー

object-fit で。

CSS
1div {
2  height: 591px;
3  width: 100%;
4  box-sizing: border-box;
5  	padding: 10px 10px 0;
6}
7div > img {
8  object-fit: cover;
9  height: 100%;
10  width: 100%;
11}
12```**動くサンプル：**[https://jsfiddle.net/va2pkdgn/](https://jsfiddle.net/va2pkdgn/)
13
14---
15
16【object-fit | MDN】
17[https://developer.mozilla.org/ja/docs/Web/CSS/object-fit](https://developer.mozilla.org/ja/docs/Web/CSS/object-fit)
18
19【1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス】
20[https://www.webcreatorbox.com/tech/object-fit](https://www.webcreatorbox.com/tech/object-fit)
21
22【object-fitをCSSのみでIEにも対応してみる - Qiita】
23[https://qiita.com/miminari/items/ab63b64c0b1bb39133ab](https://qiita.com/miminari/items/ab63b64c0b1bb39133ab)

投稿2019/01/16 15:18

kei344

総合スコア69407

背景にしてはどうでしょうか？

css
1.image {
2    background: url(https://teratail-v2.storage.googleapis.com/uploads/avatars/u9/95211/Il58fijK_thumbnail.jpg) no-repeat center/1300px 511px; /* 追記 */
3    margin: 10px 10px 0; /* 追記 */
4    position: relative;
5    overflow: hidden;
6    width: 100%;
7    height: 529px;
8  }

追記

bxslider使用

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>sample</title>
6  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css">
7  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
8  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
9  <style>
10  * {
11    margin: 0;
12    padding: 0;
13  }
14  .bxslider {
15    width: 100%;
16    height: 529px;
17    margin: 10px 10px 0;
18  }
19
20  .image {
21    width: 1300px;
22    margin: 0 auto;
23  }
24
25  img {
26    width: 100%;
27    height: 511px;
28  }
29  </style>
30</head>
31<body>
32  <ul class="bxslider">
33    <li>
34      <div class="image">
35        <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u9/95211/Il58fijK_thumbnail.jpg" alt="画像">
36      </div>
37    </li>
38    <li>
39      <div class="image">
40        <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u9/95211/Il58fijK_thumbnail.jpg" alt="画像">
41      </div>
42    </li>
43    <li>
44      <div class="image">
45        <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u9/95211/Il58fijK_thumbnail.jpg" alt="画像">
46      </div>
47    </li>
48  </ul>
49  <script>
50  $('.bxslider').bxSlider();
51  </script>
52</body>
53</html>
54

追記２

下記で試してください

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>sample</title>
6  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css">
7  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
8  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
9  <style>
10  * {
11    margin: 0;
12    padding: 0;
13  }
14
15  body {
16    padding: 0 10px;
17  }
18
19  .bxslider {
20    width: 100%;
21    height: 529px;
22  }
23
24  .image {
25    background: url(https://teratail-v2.storage.googleapis.com/uploads/avatars/u9/95211/Il58fijK_thumbnail.jpg) no-repeat center/1300px 511px;
26    margin-top: 10px;
27    width: calc(100% - 10px);
28    height: 529px;
29  }
30  </style>
31</head>
32<body>
33  <ul class="bxslider">
34    <li>
35      <div class="image"></div>
36    </li>
37    <li>
38      <div class="image"></div>
39    </li>
40    <li>
41      <div class="image"></div>
42    </li>
43  </ul>
44  <script>
45  $('.bxslider').bxSlider();
46  </script>
47</body>
48</html>
49