質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.06%

  • HTML

    7233questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    4610questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Bootstrap

    780questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Bootstrapでぴったりサイズの画像を横並びにできない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 305
退会済みユーザー

退会済みユーザー

いつもお世話になっております。
今回は画像なのですが、ブートストラップを使って
900 × 490のindex-top1.pngと
270 × 490のindex-top2.pngを
並べているのですが綺麗に横並び1列になってくれません。

2つ合わせてwideは1170px、間違いないハズなのですが...
padding0; magin0;を至る所に貼ってます。
どこが悪いのかわからないままなのでご教授ください。
よろしくお願いします!
イメージ説明

htmlは色々組んでしまったので極力、関係ない部分は削除したものを貼ります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<title>タイトル</title>
<meta name="Description" content="#" />
<meta name="Keywords" content="" />
<link rel="canonical" href="http://www.candy-b.com/" />
<!-- BootstrapのCSS読み込み -->
<link href="css/bootstrap.css" rel="stylesheet" />
<!--css読み込み-->
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/bs-button-style.css" rel="stylesheet" type="text/css">
<link href="css/bs-button-style.min.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/hover.css" rel="stylesheet" media="all">
<!-- jQuery読み込み -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.zaccordion.min.js"></script>
<script src="js/enquire.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<!-- BootstrapのJS読み込み -->
<script src="js/bootstrap.js"></script>
<!--WEBfont-->
<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->
</head>
    <div class="wrap">
<body>
<div class="index-main">

  <div class="background-mainborder1">&nbsp;</div>
          <div class="index-c1 ">
  <div class="container">
      <div class="row index-img shadow">
        <div class="index-c1img1 col-lg-9 col-sm-9 hidden-xs col-md-9 clear" ><img src="images/index-top1.png"  width="100%" height="auto"></div>
        <div class="index-c1img2 col-sm-3 col-lg-3 hidden-xs col-md-3"><img src="images/index-top2.png" width="100%" hight="auto">
          <i class="fa fa-graduation-cap fa-2x"></i><span><p>メニュー</p></span>
        </div>
      </div>
      <div class="index-c1menu">
        <div class="row shadow">
            <div class="c1menu-1 col-sm-3 col-lg-3 col-md-3 col-sm-offset-2 col-xs-3"><a href="#"><i class="fa fa-pencil fa-2x"></i><br><span>メニュー</span></a></div>
          <div class="c1menu-2 col-lg-3 col-md-3 col-sm-3 col-xs-3"><a href="#"><i class="fa fa-users fa-2x"></i><br><span class="hidden-xs">
              メニュー</span><span class="visible-xs c1menu-span2">
              メニュー</span></a></div>
          <div class="c1menu-3 col-sm-3 col-lg-3 col-md-3 col-xs-3"><a href="#"><i class="fa fa-comments-o fa-2x"></i><br><span>メニュー<br class="visible-xs">メニュー</span></a></div>
          <div class="c1menu-4 col-xs-3 col-sm-3 col-lg-3 col-md-3 col-md-offset-1 col-sm-offset-1"><a href="#"><i class="fa fa-edit  fa-2x"></i><br>
          <span>メニュー</span></a></div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
    </div>
</html>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-19564741-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>


cssも同様です。

@charset "utf-8";
/* CSS Document */












/* CSS Document */

@media(max-width:991px) {

    .c4-rink p {
        padding-right: 10px;
        position: absolute;
        z-index: 1;
    }
}

.wrap {
    overflow: hidden;
}

body {
    min-width: 767px;
    width: 100%;
}

a:hover {
    opacity: 0.6;
    text-decoration: none;
}
img {
    max-width: 100%;
    height: auto;
}

.index-headermain {
    padding: 0 15px;
}

.index-headercontact {
    text-align: right;
}

.index-headercontact-sm {
    text-align: right;
}

.index-headercontact {
    color: #fff6db;
    font-size: 14px;
    letter-spacing: 3px;
    padding-top: 15px;
}

.index-headercontact-sm {
    color: #fff6db;
    font-size: 14px;
    letter-spacing: 3px;
}

.index-mail-sm {
    font-sixe: 16px;
    padding: 10px 20px;
    margin-left: 10px;
    border: solid 1px;
    color: #fff6db;
    text-decoration: none;
}
.index-mail-sm a {
    text-decoration-color: #fff6db;
    text-decoration: none;
}
.index-mail-sm a:hover {
    color: #fff6db;
    text-decoration: none;
}
.index-mail-sm a:link {
    color: #fff6db;
    text-decoration: none;
}
.index-mail-sm a:visited {
    color: #fff6db;
    text-decoration: none;
}
.index-mail-sm i {
    padding-right: 10px;
}

.p-sm {
    margin-bottom: -9px; 
}

.index-mail {
    font-sixe: 16px;
    padding: 10px 20px;
    margin-left: 10px;
    border: solid 1px;
    color: #fff6db;
    text-decoration: none;
}
.index-mail a {
    text-decoration-color: #fff6db;
    text-decoration: none;
}
.index-mail a:hover {
    color: #fff6db;
    text-decoration: none;
}
.index-mail a:link {
    color: #fff6db;
    text-decoration: none;
}
.index-mail a:visited {
    color: #fff6db;
    text-decoration: none;
}
.index-mail i {
    padding-right: 10px;
}

.index-movie {
    position: relative;
}

.index-header {
    position: fixed;
    z-index: 100;
    color: #fff;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background-color: #42c4c4;
    opacity: 0.8;
}


.index-headertext {
    font-size: 8px;
    margin-top: 0px;
    padding-top: 5px;
    color: #fff;
    text-align: right;
}




.index-headermenu-ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #fff;
}
ul.index-headermenu-ul a {
    display: block;
}
ul.index-headermenu-ul a:hover {
    color: #fff;
}
.index-headermenu-ul a {
    text-decoration-color: #fff;
    text-decoration: none;
}
.index-headermenu-ul a:link {
    color: #fff;
}
.index-headermenu-ul a:visited {
    color: #fff;
}
.index-headermenu-li {
    font-size: 14px;
    text-align: center;
    border-left: 1px solid #ffffff;
}
.index-headermenu-li:last-child {
    border-right: 1px solid #ffffff;
}






.index-headermenu3-ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #fff;
}
ul.index-headermenu3-ul a {
    display: block;
}
ul.index-headermenu3-ul a:hover {
    color: #fff;
}
.index-headermenu3-ul a {
    text-decoration-color: #fff;
    text-decoration: none;
}
.index-headermenu3-ul a:link {
    color: #fff;
}
.index-headermenu3-ul a:visited {
    color: #fff;
}
.index-headermenu3-li {
    padding: 0;
    font-size: 11px;
    text-align: center;
    border-left: 1px solid #ffffff;

}
.index-headermenu3-li:last-child {
    border-right: 1px solid #ffffff;
}


.index-headermenu2-ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #fff;
}
ul.index-headermenu2-ul a {
    display: block;
}
ul.index-headermenu2-ul a:hover {
    color: #fff;
}
.index-headermenu2-ul a {
    text-decoration-color: #fff;
    text-decoration: none;
}
.index-headermenu2-ul a:link {
    color: #fff;
}
.index-headermenu2-ul a:visited {
    color: #fff;
}
.index-headermenu2-li {
    font-size: 12px;
    text-align: center;
    border-left: 1px solid #ffffff;
}
.index-headermenu2-li:last-child {
    border-right: 1px solid #ffffff;
}

.index-container {
    max-width: 100%;
    height: auto;
    padding: 0;
}
.background-mainborder1 {
    background-color: #28acb3;
    padding: 6px 0;
}
.index-main {
    text-align: center;
}
.index-c1 {
    background-image: url(../images/container-background.png);
    background-position: left top;
    background-repeat: repeat-x;
    height: 100%;
    width: auto;
}

.shadow {
    box-shadow: 0px 0px 20px;
    padding: 0;
}
.index-c1img1 {
    float: left;
    padding: 0;
    margin: 0;
}
.index-c1img2 {
    float: right;
    padding: 0;
    margin: 0;
    position: relative;
    font-size: 15px;
}

.fa-graduation-cap  {
    color: #009dbf;
    position: absolute;
    width: 185px;
    top: 71%;
    left: 40%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


.index-c1img2 span {
    color: rgba(49, 49, 49, 0.702);
}

.index-c1img2 p {
    position: absolute;
    width: 185px;
    top: 71%;
    left: 62%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.index-c1menu {
    padding: 0;
    margin: 0;
}

.index-c1menu i {
    color: #009dbf;
}

.index-c1menu span {
    color: rgba(49, 49, 49, 0.702);
}
.index-c1menu i {
    padding-bottom: 10px
}

.index-main {
    position: relative;
    z-index: 1;
}

.c1menu-1 {
    display: block;
    margin: 0;
    padding: 15px;
    text-align: center;
    background-color: #d6deed;
}
.c1menu-2 {
    display: block;
    margin: 0;
    padding: 15px;
    text-align: center;
    background-color: #d6e8ed;
}

.c1menu-span2 {
    padding-top: 10px;
    padding-bottom: 10px; 
}

.c1menu-3 {
    display: block;
    margin: 0;
    padding: 15px;
    background-color: #CDDFE7;
}

.c1menu-3 a{
    display: block;
}

.c1menu-4 {
    display: block;
    margin: 0;
    padding: 15px;
    text-align: center;
    background-color: #FFFFFF;
}
.index-c2 {
    text-align: center;
    font-family: "MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}
.background-mainborder2 {
    padding: 50px 0;
}
.index-c2text1 {
    font-size: 30px;
    font-family: "Sorts Mill Goudy";
    letter-spacing: 1px;
}

.index-c2text2 {
    font-size: 27px;
    font-family: 'MS P明朝', 'MS PMincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'serif';
    line-height: 1px;
    letter-spacing: 5px;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2017/12/21 10:14

    新しい画像を追加しました!ご確認ください!

    キャンセル

  • Lhankor_Mhy

    2017/12/21 12:05

    『2つ合わせてwideは1170px』とはどういう意味ですか? cssの中に "wide" "1170px" という記述が見当たりませんでしたが、ご提示されていないコードに記述されているのでしょうか?

    キャンセル

  • Lhankor_Mhy

    2017/12/21 12:10

    ああ、Bootstrap のコンテナ幅1140pxのことですかね?

    キャンセル

回答 1

checkベストアンサー

+2

Bootstrapにはグリッドシステムがあり、12分割したグリッドを使ってレイアウトするものです。classについているcol-md-9などがそれで、この場合は12分割したグリッドのうち9を使った幅、という意味です。つまり3/4ですね。

このとき、親要素が1170pxだったとすると、グリッド幅は1170*9/12=877.5pxになります。これは画像幅の900pxより小さいので画像が縮小されます。
また、col-md-3がついているindex-top2.pngの方は、同様の計算で292.5pxです。これは画像幅より大きいので、画像が拡大されます。

片方の画像が縮小され、片方の画像が拡大されているのが、ズレの原因です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/21 16:22

    なるほど...ご回答ありがとうございます!そもそも画像がcolにあったサイズではないということでしょうか?拡大縮小して入れなおさなければいけないということですか?

    キャンセル

  • 2017/12/22 09:36

    そうですね、グリッド比にあわせて画像を作り直すか、CSSで`width:100%`をやめて、`object-fit`などを使うのもいいのかもしれませんね。
    https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

    キャンセル

  • 2018/01/09 17:01

    お返事遅れましたが無事に解決しました!ありがとうございました!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 91.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    7233questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    4610questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Bootstrap

    780questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。