如何使用CSS强制图像响应，使其保持在相同位置？

Question

我使用CSS设置了这样的图像。

以下是常规桌面的外观：

我在图像（头像+箭头）上使用以下CSS来实现此效果：

img#sideimage {
     position: absolute;
     margin-left: -96px!important;
     margin-top: 0px;
     width: 180px;
}

HTML非常简单;它只是WordPress的短代码：

[row class="toppage"][column size="2/3"]<a href="#injustice_form" target="foobox" 
data-width="460px">Know someone serving a life sentence? Do you feel it was
prosecutorial overkill?</a>[/column][column size="1/3"]<img id="sideimage" 
src="https://nationalcdp.org/wp-content/uploads/2014/09/feature-this8.png" alt="Donate 
to the NCDP" align="right" />[spt_paybutton text="Donate!" comment="true" 
service="false" amount="" design="28" lightbox="true"][/column][/row]
[row][column size="2/3"]
There are currently roughly 160,000 prisoners in
America serving life sentences without the possibility of parole.
[/column]
[/row]

转换为这个html输出：

<div class="su-row toppage"><div class="su-column su-column-size-2-3"><div class="su- 
column-inner su-clearfix"><a href="#injustice_form" target="foobox" 
data-width="460px">Know someone serving a life sentence? Do you feel it was 
prosecutorial overkill?</a></div></div>

<div class="su-column su-column-size-1-3"><div class="su-column-inner 
su-clearfix"><img id="sideimage" src="https://nationalcdp.org
/wp-content/plugins/speed-booster-pack/inc/images/1x1.trans.gif" data-lazy-
src="https://nationalcdp.org/wp-content/uploads/2014/09/feature-this8.png" alt="Donate 
to the NCDP" align="right" /><noscript><img id="sideimage" src="https://nationalcdp.org
/wp-content/uploads/2014/09/feature-this8.png" alt="Donate to the NCDP" align="right" 
/></noscript><a data-rel="prettyPhoto" class="spt_newpay_button buttondesign28"  
href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal
/index.php?&serv=false&amount=&comment=true&iframe=true&width=100%&height=100%">Donate!
<span></span></a></div></div></div>

但是当使用视口较小的设备时，图像（包括头像和箭头）会被左侧按下并切断：

我是否（也应该）使用@ media查询解决此类问题？如果是这样，任何人都可以用我提供的信息指导我完成这样做吗？

例如，一个例子位于https://nationalcdp.org/life-sentences/

感谢任何人提供的任何指导！

Answer 1

不要使用width:180px使用百分比值，所有响应元素/页面必须使用仅百分比值：

#a{
  width:100px;
  height:100px;
  background:red;
}
#b{
  width:15.6%;
  height:30%;
  background:black;
  position:absolute;
}

<div id="a"></div>
<div id="b"></div>

注意：全屏查看示例 黑盒子是相对的，红色的盒子不是，在页面上放大，看看红色的盒子是如何变大的，黑色的盒子看起来完全一样。

Answer 2

这是很多冗余的HTML！让我们用最低要求简化你的标记：

<div class="donate">
  <a href="#" class="link">
    Know someone serving a life sentence? Do you feel it was prosecutorial overkill?
  </a> 
  <a href="#" class="button">Donate!</a>
</div>

撒上一些CSS

• 使用CSS创建按钮并应用简单的:hover和:active州。

• 按钮被赋予position: absolute，并将相对于其position: relative容器.donate定位。当容器宽度减小时，top: 50%以及负上边距将使其保持居中。

• .donate被赋予适当的最大和最小宽度

• 箭头/头像在.donate容器上添加了一个伪元素。

• .text上的右边距足够大，可以说明按钮的宽度。

示例演示

使用当前图像

body {
  margin: 0;
  font-family: Helvetica;
}
.donate {
  max-width: 500px;
  min-width: 350px;
  position: relative;
  box-shadow: 0 0 10px #CCC;
  padding: 10px;
  margin: 10px auto 0;
}

/*arrow / avatar image*/
.donate:after {
  content: '';
  background: url(https://nationalcdp.org/wp-content/uploads/2014/09/feature-this8.png) left top no-repeat;
  /*background image*/
  display: block;
  height: 180px;
  width: 180px;
  position: absolute;
  right: 90px;
  top: 50%;
  margin-top: -15px;
}
.link {
  display: block;
  margin-right: 140px;
  color: #000;
  text-decoration: none;
}
.button {
  text-decoration: none;
  background: #940001;
  color: #FFF;
  padding: 0.5em;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -1.05em;
  transition: all 0.2s;
  border-radius: 5px;
}
.link:hover {
  text-decoration: underline;
}
.button:hover {
  box-shadow: 0 0 10px #940001;
}
.button:active {
  box-shadow: 0 0 0 #940001;
}

<div class="donate">
  <a href="#" class="link">
    Know someone serving a life sentence? Do you feel it was prosecutorial overkill?
  </a> 
  <a href="#" class="button">Donate!</a>
</div>

改变了图像

body {
  margin: 0;
  font-family: Helvetica;
}
.donate {
  max-width: 500px;
  min-width: 350px;
  position: relative;
  box-shadow: 0 0 10px #CCC;
  padding: 10px;
  margin: 10px auto 0;
}

/*arrow / avatar image*/
.donate:after {
  content: '';
  background: url(http://i.stack.imgur.com/tWfRP.png) left top no-repeat;
  /*background image*/
  display: block;
  height: 180px;
  width: 180px;
  position: absolute;
  right: -20px;
  top: 50%;
  margin-top: -5px;
}
.link {
  display: block;
  margin-right: 140px;
  color: #000;
  text-decoration: none;
}
.button {
  text-decoration: none;
  background: #940001;
  color: #FFF;
  padding: 0.5em;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -1.05em;
  transition: all 0.2s;
  border-radius: 5px;
}
.link:hover {
  text-decoration: underline;
}
.button:hover {
  box-shadow: 0 0 10px #940001;
}
.button:active {
  box-shadow: 0 0 0 #940001;
}

<div class="donate">
  <a href="#" class="link">
    Know someone serving a life sentence? Do you feel it was prosecutorial overkill?
  </a> 
  <a href="#" class="button">Donate!</a>
</div>

Answer 3

如果你使用的是bootstrap，那么你可能做的最多就是将这个部分的html插入一个div中，它的类将是：

<div class="col-xs-12">
   .........
   .........
</div>

这将强制将html包装到屏幕的整个宽度。