html - 如何使用 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>

但是当使用视口(viewport)较小的设备时，图像(包括头像和箭头)会向左模糊，并被切断:

我可以(也应该)使用@media queries 来解决这样的问题吗？如果是这样，有人可以根据我提供的信息以正确的方式指导我这样做吗？

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

感谢您提供任何指导!

Answer 1

那是很多多余的 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>