时间戳

首页 > 解决方案 > 将图像作为可调整大小组件的背景

javascript - 将图像作为可调整大小组件的背景

问题描述

我正在尝试创建一个由两列组成的简单布局：左侧的宽度应为容器的 30%，右侧应占用剩余空间。一切都应该在台式机、平板电脑和移动设备上运行，等等。

我正在尝试做这样的事情，但图像不应该是窗口页面背景，而应该是右侧面板。

所以：

.page {
  border: 3px solid black;
  display: flex;
  width: 100%;
  height: 100%;
}

.left {
  width: 30%;
  max-width: 300px;
  border: 3px solid steelblue;
}

.right {
  flex-grow: 1;
  border: 3px solid tomato;
}

img {
  width: 100%;
  height: 100%;
}
<div class="page">
  <div class="left">This is the left panel with some content</div>
  <div class="right">
    <img src="https://siameseofday.com/wp-content/uploads/2020/05/Ragdoll-Cat-min-scaled.jpg" />
  </div>
</div>

我的代码有问题，因为左侧面板不是容器的 30%，然后我不知道如何做剩下的。我读到的唯一例子是关于整个窗口，而不仅仅是一个 div 容器。有人能帮助我吗？

标签： javascriptcss

解决方案

好吧，使用 grid 和 flex 很容易。请参阅此视频，了解如何保持左右空间。

关于正确的图像应该响应并保持与跨浏览器的比例。我建议以下。

.page {
  border: 3px solid black;
  display: flex;
  width: 100%;
  height: 100%;
}

.left {
  width: 30%;
  min-width: 300px;
  max-width: 300px;
  border: 3px solid steelblue;
}

.right {
  width: 70%;
  min-height: 300px;
  border: 3px solid tomato;
  background: url(https://siameseofday.com/wp-content/uploads/2020/05/Ragdoll-Cat-min-scaled.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
<div class="page">
  <div class="left">This is the left panel with some content</div>
  <div class="right"></div>
</div>

推荐阅读