Question

我的页面中有很多包含div图像的页面，并且布局仅在全尺寸时看起来不错，当浏览器窗口较小时，它确实很乱。我在堆栈溢出时发现了类似的问题，但他们的答案对我的情况不起作用。

编辑：我做了你们所建议的一切，但仍然没有用。

<!DOCTYPE html>
<html>

<body background="">

  <head>
    <style>
      div.asciigun {
         top: 30%;
         left: 50%;
         position: absolute;
         max-width: 100%;
  
      }
    </style>
  </head>

  <body>


    <div class="asciigun">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU7ROirglSjKnpsLvt29uCDlVtpZutirtiXyg3FF0UtXFf0TnE" height="90%" width="90%" >
      </div>

  </body>

</html>

Answer 1

让我们尝试另一种方法。尽量不要修改max-width或max-height。保持原样（或设置width: 100%和height: 100%）。

然后将<img src="url.jpg">更改为background: url("url.jpg");，然后只需

.image {
    background-size: cover;
}

或

.image {
    background-size: contain;
}

Answer 2

好吧，我知道了！我需要视口值而不是％。现在，图像与浏览器的大小成正比，并保持不变。

CREATE TABLE table_name
(
  column1 datatype null/not null,
  column2 datatype null/not null,
  ...

  CONSTRAINT fk_column
     FOREIGN KEY (column1, column2, ... column_n)
     REFERENCES parent_table (column1, column2, ... column_n)
     ON UPDATE CASCADE
);

当浏览器的宽度/高度改变时，自动调整图像大小

2 个答案: