0

我正在尝试在下面发布的图片中实现以下目标。当我调整浏览器的大小时，我希望图像和按钮的大小减小，但与主背景保持相同的比例。我还希望文本不与图像重叠，因此字体大小应该变小。我怎样才能在css中实现这一点？继承人的形象：http: //i.imgur.com/2qR2y4E.png

这是我认为应该正确的 HTML 代码。我已经尝试过图像的 CSS 绝对定位，我尝试过浮动每个元素并使用百分比作为宽度。如果它达到移动宽度，我只会在图像上显示：无，但保留按钮。任何帮助表示赞赏。

<div class="content">
  <div class="text>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
  </div>
  <div class="image">
    <img src=".." />
    <div class="button"></div>
  </div>
</div>
4

1 回答 1

1

我根据 Jake 的链接创建了一个小提琴 - http://jsfiddle.net/GkrpR/2/ 当您调整屏幕大小时，它会更改图像和文本框的大小。这有点粗糙，因此需要您更改 css 值以满足您的需要。但对你来说应该是一个好的开始。

它使用 css 中的媒体查询来检查最大屏幕尺寸，然后根据它更改样式。

例如，当屏幕尺寸达到 300 像素或更小时，使用以下样式：

@media screen and (max-width:300px){     
    .image img{width:45px;height:50px;}
    .text{height:30px;font-size:6pt;color:#aaf;}
    .main{width:100px;}
}

希望这可以帮助

于 2013-05-23T03:04:57.533 回答