Question

如何使图像适合背景。这是我到目前为止所做的事情？这是我的css尝试：

#bio{
    min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

这是托管在JsFiddle

上的

Answer 1

常规img的另一个好选择是div background-image，定位它更容易。这是工作小提琴：

https://jsfiddle.net/oy3wrzwv/3/

和一个片段：

#bio {
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
  background-image: url("https://images.unsplash.com/photo-1499561385668-5ebdb06a79bc?auto=format&fit=crop&w=1949&q=80");
  background-size: cover;
  background-position: center center;
}

<div id="bio"></div>

Answer 2

由于您尝试将图片作为背景，因此您可能需要考虑删除HTML代码，即：

<img src="https://images.unsplash.com/photo-1499561385668-5ebdb06a79bc?auto=format&fit=crop&w=1949&q=80" id="bio">

并将其用作CSS代码：

body {
background-image: url(https://images.unsplash.com/photo-1499561385668-5ebdb06a79bc?auto=format&fit=crop&w=1949&q=80);
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: flex;
top: 0;
left: 0;
}

在上面的代码中，我还将position更改为flex，以便可以看到整个图像并且不会被隐藏，正如我在将其设置为{{时所看到的那样1}}而不是。如果您需要更多帮助，请与我们联系！

css和html使图片适合背景

2 个答案: