Question

当外部图像开始缩放时，有没有办法调整缩放到窗口的绝对图像？

这是我到目前为止所做的。

当窗口大小很小时，当bgimage开始调整大小时，我希望内容img缩小。并保持内容img始终位于bgimage的中间。（在这个例子中，最好只是覆盖650X150（X））

我在想我需要在内容图片中添加左右边距，因此当屏幕很小时，边距会将图像缩小，但它似乎无法正常工作。

HTML

<div class="wrapper">
    <div class="bgimage">
        <img  src="http://placehold.it/650x150" />
    </div>

  <div class="content">
     <img src="http://placehold.it/100x100" /> 
  </div>
</div>

CSS

.wrapper {
    width: 100%;
    position: relative;
    background-color: blue;
}

.bgimage {
    width: 100%;
    height: auto;
    max-width: 650px;
    margin: 0 auto;
}

.bgimage img {
    width: 100%;
    height: auto;
}

.content {
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 50%;
    left: 50%;
    border: 1px red solid;
    max-width: 50px;
    width: 100%;
}

.content>img {
    max-width: 50px;
    width: 100%;
    height: auto;
}

Answer 1

你可以做绝对位置技巧，简化标记如下。

http://jsfiddle.net/dd5bmzrh/

＆＃13;

.wrapper {
    position: relative;
    background-color: blue;
}
.bgimage {
    max-width: 100%; /* or width: 100%; */
    height: auto;
    display: block; /* get rid of bottom extra space*/
    margin: 0 auto;
}
.smimage {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 50px;
    max-height: 50px;
    border: 1px red solid;
}

＆＃13;

<div class="wrapper">
    <img class="bgimage" src="http://placehold.it/650x150" />
    <img class="smimage" src="http://placehold.it/100x100" />
</div>

＆＃13;

Answer 2

你想做这样的事吗？

<div class="wrapper">
  <img  class="bgimage" src="http://placehold.it/650x150" />
  <img class="smimage" src="http://placehold.it/100x100" />       
</div>

.wrapper {
    width: 100%;
    background-color:blue;
    position:relative;
}

.bgimage {
    width: 100%; 
}

.smimage {
    position:absolute;
    bottom:0;
    left:50%;
    padding:0;
    margin:0;
    width:10%;
    border:1px red solid;
}

Answer 3

你的意思是这样吗？

https://jsfiddle.net/q4gv5oah/1/

.content {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50% -50%);
  -webkit-transform: translate(-50% -50%);
  -o-transform: translate(-50% -50%);
  border:1px red solid;
  max-width:50px;
  width:100%;

}

Answer 4

那么，您如何看待我的解决方案？你想要：

当窗口大小很小时，当bgimage开始调整大小时，我希望内容img缩小。并保持内容img始终位于bgimage的中间。

因此，在我的解决方案中，您将大图像集中心设置为背景并居中放置小图像。由于background-size:cover;，较大的图像将适合窗口，居中和较小的图像也会居中。这取决于您希望拥有的较小图像尺寸。我解决方案的另一个例子是：

＆＃34;宽度＆＃34;较小的图像=＆gt; 30％左右＆＃34;离开＆＃34;将是35％因为 35％（左）+ 35％（右）+ 30％（图像）=宽度的100％。我已经了解到适合内容的最佳方式是为其父母创建相对的孩子。我建议的另一件事就是使用它：

http://meyerweb.com/eric/tools/css/reset/

对我来说这是非常有用的代码。将它添加为第一个css样式文件，你总是确定什么都没有＆＃34;没有预期＆＃34;会发生的。

＆＃13;

html,

div,

body {

  width: 100%;

  height: 100%;

  bottom: 0;

  left: 0;

  right: 0;

  top: 0;

}

.bgimage {

  background: url("http://placehold.it/650x150") no-repeat;

  background-size: cover;

  position: relative;

  width: 100%;

  background-position: center;

}

.smimage {

  position: relative;

  margin-left: auto;

  margin-right: auto;

}

.smimage img {

  bottom: 0 !important;

  width: 20%;

  display: block;

  position: absolute;

  border: 1px solid black;

  left: 40%;

}

＆＃13;

<div class="wrapper">
  <div class="bgimage">
    <div class="smimage">
      <img src="http://placehold.it/100x100" />
    </div>
  </div>
</div>

＆＃13;

如何调整缩放到窗口大小的绝对图像的大小

4 个答案: