Question

我的网页有点问题。

查看：https://user.oc-static.com/upload/2016/12/24/14826126993639_14825671380969_123.png

问题是图像应该完全保持正确但是当我更改浏览器的分辨率时图像向左移动。 Chrome和Internet Explorer（不是Firefox）

会出现此问题

html {
    height: 100%;
    background: black;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
table {
    border: 0;
    padding: 0;
    margin: 0;
}
#container {
    color: white;
    display: flex;
    overflow: hidden;
    height: 100%;
}
#global {
    width: 100%;
    height: 100%
    text-align: center;
}
#table {
    width: 100%;
    height: 100%;
}
#droite {
    height: 100%;
    text-align: right;
}
#image {
    height: 100%;
    display: block;
    width: inherit;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>

</head>
 
 
<body>
 
  <div id="container">
 
    <div id="global">
      <table id="table">
        <tbody>
          <tr>
            <td>d</td>
          </tr>
        </tbody>
      </table>
    </div>
 
    <div id="droite">
      <img src="//zagicien.com/test.jpg" alt="" id="image">
    </div>
 
  </div>
 
</body>
 
</html>

Answer 1

如果您在第二个元素上添加flex: 1，在第一个元素上添加flex: 0，则应该得到您期望的结果。

https://jsfiddle.net/wrmbh6qc/1/

html {
  height: 100%;
  background: black;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

table {
  border: 0;
  padding: 0;
  margin: 0;
}

#container {
  color: white;
  display: flex;
  overflow: hidden;
  height: 100%;
}

#global {
/*  width: 100%;*/
  height: 100%;
  text-align: center;
flex: 0;
}

#table {
  width: 100%;
  height: 100%;
}

#droite {
  height: 100%;
  text-align: right;
flex: 1;
width: -webkit-fill-available;
}

#image {
  height: 100%;
  width: auto;
}

<div id="container">

  <div id="global">
    <table id="table">
      <tbody>
        <tr>
          <td>d</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="droite">
    <img src="//zagicien.com/test.jpg" alt="" id="image">
  </div>

</div>

Answer 2

解决方案：删除ID为＆＃34; Droite＆＃34;并只保留图像。

铬虫显示弹性宽度100

2 个答案: