Question

我有一个博客

http://mountaintopchef.blogspot.com/

我希望我的标题（横幅）自动调整大小以适应不同的屏幕分辨率。我认为它调整到所有屏幕尺寸时称为流畅布局。我在网上找到了一些代码但没有一个符合我的主题代码如果它不能填满屏幕直到水平结束，但至少它将是中心，那就没关系。

非常感谢

Answer 1

我刚刚使用Google Chrome Inspect Element快速找到横幅代码，我所做的就是更改

<img alt="Mountain Top Chef" height="252px; " id="Header1_headerimg" src="http://3.bp.blogspot.com/-5nGgddhpZl4/VedKBQbgsCI/AAAAAAAAAlQ/40XzdyCllRo/s1600-r/mountain-top-chef-banner%2B.jpg" style="display: block" width="100%; ">

到

<img alt="Mountain Top Chef" height="252px; " id="Header1_headerimg" src="http://3.bp.blogspot.com/-5nGgddhpZl4/VedKBQbgsCI/AAAAAAAAAlQ/40XzdyCllRo/s1600-r/mountain-top-chef-banner%2B.jpg" style="display: block" width="1264px; ">

或更容易看到

width="1264px;

到

width="100%;

Answer 2

我建议您使用bootstrap之类的框架，并在横幅上放置容器流体类。

在代码中，您将通过CDN包含引导程序：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

你可以将它添加到你的横幅img：

class="container-fluid"

结束时：

<img alt="Mountain Top Chef" height="252px; " id="Header1_headerimg" src="http://3.bp.blogspot.com/-5nGgddhpZl4/VedKBQbgsCI/AAAAAAAAAlQ/40XzdyCllRo/s1600-r/mountain-top-chef-banner%2B.jpg" style="display: block" width="1264px; " class="container-fluid">

（我直接从你的页面获得了代码）

Bootstrap tutorial。

自动调整横幅大小以适应不同的屏幕分辨率？

2 个答案: