响应式图像缩放到屏幕宽度并保持其比例

Question

我正在构建一个（我认为会是）一个简单的投资组合网站。

从附件上传中可以看到，图像通过绝对在屏幕上的不同位置显示。但是，当我调整浏览器大小时，图像会被切断。我也尝试过使用百分比，但是在调整浏览器大小时，图像之间的间距会发生变化。

我想要达到的目的是保持图像的比例，以及图像之间的间距在每个屏幕设备和高度上保持一致。这可能吗？我怎样才能实现它？

Answer 1

一种方法可以是使用媒体查询。

我已经在评论中做了一个非常简单的例子：

See it here

我使用流体宽度和绝对位置来尝试保持适当的比例：

img { position: absolute;}
img:nth-child(1) { left: 0; top: 0; width: 40%;}
img:nth-child(2) {right: 10%; top: 10px; width: 40%;}
img:nth-child(3) {left: 0; top: 200px; width: 50%;}
img:nth-child(4) {right: 0; top: 200px; width: 40%;}

@media (min-width: 640px){
  img:nth-child(1) { left: 0; top: 0; width: 30%;}
  img:nth-child(2) {right: 10%; top: 10px; width: 30%;}
  img:nth-child(3) {left: 0; top: 200px; width: 40%;}
  img:nth-child(4) {right: 0; top: 200px; width: 30%;}
}

它不是完全正常的，我没有做过任何事情，但我希望这样做可以帮助你。