Question

div应该向左长大，但是，与现在相反。

顺便说一句，左边距和顶部距是必需的。

展示问题的快速gif：https://gyazo.com/ce51c504698395c26cffefb9b74e7e3e

html, body {
  width: 100%;
  height: 100%;
}

#a {
  width: 50%;
  height: 100%;
  border: 1px solid black;
}

#img-wrapper {
  margin-left: 10%;
  margin-top: 20%;
  width: 50%;
  position: relative;
  border: 1px solid red;
}

img {
  width: 100%;
}

<div id="a">
  <div id="img-wrapper">
   <img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>

Answer 1

尝试一下：-

#a {
    width: 70%;
    height: 100%;
    border: 1px solid black;
    position: relative;
}
#img-wrapper {
    width: 40%;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 1px solid red;
}

Answer 2

如果您想通过增加width属性来使图像从右向左移动，则应将其赋予float属性：

#img-wrapper {
  float: right;
  margin-top: 0; // if you want it to start from top right edge
}

Answer 3

添加了margin-right: 10%; float: right;

#img-wrapper {
    margin-right: 10%;
    margin-top: 20%;
    width: 50%;
    position: relative;
    border: 1px solid red;
    float: right;
}

html,
body {
  width: 100%;
  height: 100%;
}

#a {
  width: 50%;
  height: 100%;
  border: 1px solid black;
  position: relative;
}

#img-wrapper {
    margin-right: 10%;
    margin-top: 20%;
    width: 52%;
    position: absolute;
    border: 1px solid red;
    right: 0;
    bottom: 50%;
    transform: translateY(50%);
}

img {
  width: 100%;
}

<div id="a">
  <div id="img-wrapper">
    <img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
  </div>
</div>

Answer 4

听起来像问题不在于使图像“向左生长”，而在于定位#img-wrapper。

您可以通过绝对定位#img-wrapper并指定其bottom和right的位置来解决此问题。我添加了：hover样式，因此您可以在悬停时看到它“增长”。

不过是一个警告。使用百分比定位未知/可变大小的对象将在不同视口大小下给您带来非常混杂的结果。也许您想要的不是所描述的，但我认为您应该在寻找一种更灵活的解决方案，例如使用flexbox。

html, body {
  width: 100%;
  height: 100%;
}

#a {
  width: 50%;
  height: 100%;
  border: 1px solid black;
  position:relative;
}

#img-wrapper {
  right: 30%;
  bottom: 30%;
  width: 50%;
  position: absolute;
  border: 1px solid red;
}

#img-wrapper:hover {
  width: 70%;
}


img {
  width: 100%;
}

<div id="a">
  <div id="img-wrapper">
   <img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>

Answer 5

html, body {
  width: 100%;
  height: 100%;
}

#a {
  width: 50%;
  height: 100%;
  border: 1px solid black;
  position: relative;
}

#img-wrapper {
  width: 50%;
  border: 1px solid red;
  margin: 20% 0 0 20%;
  position: absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
}

img {
  width: 100%;
}

使div向左长而不是向右长

5 个答案: