HTML图片不会尊重其父母的尺寸

时间：2016-03-17 05:46:32

标签： html css image

我希望将图像放在容器内，同时保持其纵横比。我尝试设置过去曾有效的max-width: 100%和max-height: 100%但不是在这种情况下。任何帮助非常感谢。

Heres a codepen.

HTML 

<div id="views-cntnr">
  <div id="r1" class="view-row">
    <div id="v1" class="view">
      <div class="v-header">
        <button class="vh-btn v-settings"><i class="glyphicon glyphicon-cog"></i></button>
        <span class="v-title">R-Theta</span>
        <button class="vh-btn v-close"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
      <img src="http://www.fillmurray.com/g/900/900" alt="">

    </div>
    <div class="col-handle" id="r1-l-r">
    </div>
    <div id="v2" class="view">
      <div class="v-header">
        <button class="vh-btn v-settings"><i class="glyphicon glyphicon-cog"></i></button>
        <span class="v-title">Cartesian</span>
        <button class="vh-btn v-close"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
    </div>
  </div>
  <div id="r1-r2-u-d" class="row-handle"></div>
  <div id="r2" class="view-row">
    <div id="v3" class="view">
      <div class="v-header">
        <button class="vh-btn v-settings"><i class="glyphicon glyphicon-cog"></i></button>
        <span class="v-title">Longitudinal</span>
        <button class="vh-btn v-close"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
    </div>
  </div>
  <div class="row-handle" id="r2-r3-u-d">
  </div>
  <div id="r3" class="view-row">
    <div id="v4" class="view">
      <div class="v-header">
        <span class="v-title">Console</span>
        <button class="vh-btn v-close"><i class="glyphicon glyphicon-remove"></i></button>
      </div>
    </div>
  </div>
</div>

CSS 

html,
body {
  height: 100%;
}

/* VIEWS */

.view img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
}

/* VIEW HEADERS */

.v-header {
  position: relative;
  padding: 3px;
  border-bottom: #bfbfbf 1px solid;
  background-color: #1a1b1c;
  color: #ccc;
  font-weight: 900;
  font-size: 16px;
}

.v-title {
  position: relative;
  left: 35px;
}

#v4 .v-title {
  left: 6px;
}


/*VIEW BTNS */

.vh-btn {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  background-color: #343436;
  color: white;
  border: black 1px solid;
  position: absolute;
  top: 4px;
}

.vh-btn:hover {
  background-color: #4d4d50;
}

.v-settings {
  left: 6px;
}

.v-close {
  right: 5px;
}


/* view btns */


/* view headers */

#views-cntnr {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* HANDLES */

#r1-l-r {
  background-color: DodgerBlue;
  width: 6px;
  cursor: col-resize;
}

.row-handle {
  background-color: DodgerBlue;
  height: 6px;
  cursor: row-resize;
}

/* handles */

/* ROWS */


/* ROW 1 */

#r1 {
  display: flex;
}

#r1 .view {
  flex-grow: 1;
  border: #bfbfbf 1px solid;
  border-top: none;
  border-right: none;
}

#r1 .view:last-child {
  border-left: none;
}


/* row 1 */


/* ROW 2 */

#r2 .view {
  border: #bfbfbf 1px solid;
  border-top: none;
  flex-grow: 1;
}

#r2 {
  display: flex;
}


/* row 2 */


/* ROW 3 */

#r3 .view {
  border: #bfbfbf 1px solid;
  border-top: none;
  flex-grow: 1;
}

#r3 {
  display: flex;
}


/* row 3 */


/* rows */


/* views */

3 个答案:

答案 0 :(得分：0)

            <!DOCTYPE html>
            <html>
            <head>
            <title>Project Img</title>
            </head>

            <style>
            html,
            body {
              height: 100%;
            }

            /* VIEWS */

            .view img {
              max-width: 100%;
              max-height: 100%;
              width: 100%;
            }

            /* VIEW HEADERS */

            .v-header {
              position: relative;
              padding: 3px;
              border-bottom: #bfbfbf 1px solid;
              background-color: #1a1b1c;
              color: #ccc;
              font-weight: 900;
              font-size: 16px;
            }

            .v-title {
              position: relative;
              left: 35px;
            }

            #v4 .v-title {
              left: 6px;
            }


            /*VIEW BTNS */

            .vh-btn {
              padding: 2px 8px;
              border-radius: 4px;
              font-size: 10px;
              background-color: #343436;
              color: white;
              border: black 1px solid;
              position: absolute;
              top: 4px;
            }

            .vh-btn:hover {
              background-color: #4d4d50;
            }

            .v-settings {
              left: 6px;
            }

            .v-close {
              right: 5px;
            }


            /* view btns */


            /* view headers */

            #views-cntnr {
              display: flex;
              flex-direction: column;
              height: 100%;
            }

            /* HANDLES */

            #r1-l-r {
              background-color: DodgerBlue;
              width: 6px;
              cursor: col-resize;
            }

            .row-handle {
              background-color: DodgerBlue;
              height: 6px;
              cursor: row-resize;
            }

            /* handles */

            /* ROWS */


            /* ROW 1 */

            #r1 {
              display: flex;
            }

            #r1 .view {
              flex-grow: 1;
              border: #bfbfbf 1px solid;
              border-top: none;
              border-right: none;
            }

            #r1 .view:last-child {
              border-left: none;
            }


            /* row 1 */


            /* ROW 2 */

            #r2 .view {
              border: #bfbfbf 1px solid;
              border-top: none;
              flex-grow: 1;
            }

            #r2 {
              display: flex;
            }


            /* row 2 */


            /* ROW 3 */

            #r3 .view {
              border: #bfbfbf 1px solid;
              border-top: none;
              flex-grow: 1;
            }

            #r3 {
              display: flex;
            }

            </style>

            <body> 

            <div id="views-cntnr">

              <div id="r1" class="view-row">

                <div id="v1" class="view">
                  <div class="v-header">
                    <button class="vh-btn v-settings"><i class="glyphicon glyphicon-cog"></i></button>
                    <span class="v-title">R-Theta</span>
                    <button class="vh-btn v-close"><i class="glyphicon glyphicon-remove"></i></button>
                     </div>
                     <img src="http://www.fillmurray.com/g/900/900" alt="" >
                    </div>
                </div>


                <div id="v2" class="view">
                  <div class="v-header">
                    <button class="vh-btn v-settings"><i class="glyphicon glyphicon-cog"></i></button>
                    <span class="v-title">Cartesian</span>
                    <button class="vh-btn v-close"><i class="glyphicon glyphicon-remove"></i></button>
                  </div>
                </div>


              <div id="r2" class="view-row">
                <div id="v3" class="view">
                  <div class="v-header">
                    <button class="vh-btn v-settings"><i class="glyphicon glyphicon-cog"></i></button>
                    <span class="v-title">Longitudinal</span>
                    <button class="vh-btn v-close"><i class="glyphicon glyphicon-remove"></i></button>
                  </div>
                </div>
              </div>

            <div id="r2" class="view-row">
                <div id="v3" class="view">
                  <div class="v-header">
                    <button class="vh-btn v-settings"><i class="glyphicon glyphicon-cog"></i></button>
                    <span class="v-title">Console</span>
                    <button class="vh-btn v-close"><i class="glyphicon glyphicon-remove"></i></button>
                  </div>
                </div>
              </div>


             </div>

            </body>

            </html>

答案 1 :(得分：0)

我认为您应该使用“响应式图像”。您可以通过两种方式执行此操作：

img {
    width: 100%;
    height: auto;
}

或者您可以使用div并将图像设置为backgroundimage：

div {
    width: 100%;
    height: *insert height of image*px;
    background-image: url('whateveruwant.png');
    background-size: 100% 100%;
}

来源：http://www.w3schools.com/css/css_rwd_images.asp

答案 2 :(得分：0)

而不是使用

max-width：100％和max-height：100％

直接使用 img {      宽度：100％;      身高：100％ }

希望帮助

相关问题
最新问题