Question

我一直在尝试不同的高度宽度组合，并且还在互联网和本网站上搜索了一些资源。要么我发现一些人有类似的问题没有解决方案，或者有解决方案无法解决我的问题。请帮忙。

我正在使用宽屏DELL显示器。我的网页基于100％宽度。在顶部，我在左侧和右侧有我的徽标，我添加了5个尺寸为120x60,234x60,234x60,468x60,468x60的横幅。在徽标和横幅下，我有一张大桌子。

在我的显示器上一切都很好看。我可以做什么，以便在我的笔记本电脑，方形/不同大小的显示器，平板电脑和移动设备上查看时，所有5个横幅自动调整大小。该表在移动显示屏上自动缩小，但不会在横幅上缩小。请帮忙。

示例代码：我的桌面上可以看到徽标和所有横幅（分辨率1920x1080），但在其他桌面/笔记本电脑/桌面/移动设备上查看时，它不会调整大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample</title>
</head>

<body>
<table width="100%" border="0">
  <tr>
    <td><img src="http://www.microstrategy.com/Strategy/media/images/common/customer-logos/logo_ebay.jpg"></td>
    <td><img src="http://www.crossingstv.com/wp-content/uploads/2012/07/120x60.png"></td>
    <td><img src="http://www.bingobugle.com/images/ex234x60.gif"></td>
    <td><img src="http://www.bingobugle.com/images/ex234x60.gif"></td>
    <td><img src="http://www.chilefoundry.com/wp-content/uploads/468x60banner.jpg"></td>
    <td><img src="http://www.chilefoundry.com/wp-content/uploads/468x60banner.jpg"></td>
  </tr>
</table>
</body>
</html>

上表方法运作良好。尝试使用div方法，但它无法正常工作

<style>
#tophead{
    width: 100%;
}
#mainhead{
    width: 15%;
}
#adhead{
    width: 85%;
    position: absolute;
    right:0px;
    top: 15px;
}

img {
    max-width: 100%;
    height: auto;    
}
</style>

<div id="tophead">

  <div id="mainhead">
    <img src="http://www.microstrategy.com/Strategy/media/images/common/customer-logos/logo_ebay.jpg">
  </div>

  <div id="adhead">
    <img src="http://www.crossingstv.com/wp-content/uploads/2012/07/120x60.png">
    <img src="http://www.bingobugle.com/images/ex234x60.gif">
    <img src="http://www.bingobugle.com/images/ex234x60.gif">
    <img src="http://www.chilefoundry.com/wp-content/uploads/468x60banner.jpg">
    <img src="http://www.chilefoundry.com/wp-content/uploads/468x60banner.jpg">
  </div>
</div>

Answer 1

使用以下方法使图像适应父母的大小：

img {
    max-width: 100%;
    height: auto;    
}

它们会非常小，所以你可能想要从表格布局切换到块布局并给它自己的每一行

table, tr, td {
    display: block;
}

缩小移动显示屏上的顶部横幅

1 个答案: