0

所以我无法让我的网站一直缩小到 763 像素以上。它都用百分比和ems而不是像素标记，但无论如何它似乎都被卡住了。页面上的主图像也没有缩小，相反，一旦视口开始缩小，它旁边的左侧浮动 div 开始重叠。

cimmanon 帮助解决了重叠问题，但我仍然在缩小图像及其嵌套的 div 时遇到问题。

http://students.thenet.ca/jlandon/new/school/week5/

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css"/>
<link rel="stylesheet" type="text/css" href="week5_main.css" title="Main"/>
<title>Point Grey Realty</title>
<meta charset="UTF-8"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
    <header>
        <h1>Point Grey Realty</h1>
    </header>
<div id="backer">
    <article>
        <header id="listing">
            <h2>Arthur Erickson's Golden Mile - $5,290,000</h2>
            <h3>3293 Point Grey Road, Vancouver</h3>
        </header>
    </article>
    <div id="main_image"><figure><img src="goldenmile_entrance2.jpg" alt="entrance"/></figure></div>
    <article id="listing_info">
        <h4>MLS:V940361</h4>
        <figure><img src="bryanyan.jpg"/></figure>
        <ul id="bryan">
            <li>Bryan Yan</li>
            <li>Telephone: 604-732-8322</li>
        </ul>
        <ul>
            <li>Building Type: House</li>
            <li>Bedrooms: 2</li>
            <li>Bathrooms: 2</li>
            <li>Finished Interior: 1,876 sf</li>
            <li>Floor Space: 2,347 sf</li>
            <li>Lot Size: 4,405 sf</li>
            <li>Year Built: ~1963</li>
            <li>2 Storeys</li>
            <li>Large Rec Room</li>
            <li>Age of Building: 50 years</li>
            <li>Land Size: 33.0 x 133.5</li>
            <li>Water, mountain &amp; city views</li>
            <li>Waterfront</li>
        </ul>
    </article>
    <article id="listing_history">
        <p>Designed in 1963, this was the area’s first multi-unit development. The materials chosen for this estate were brick or plaster for walls and structural bays, and pressure treated fir for the wood spans. These materials, along with brick or quarry tile flors, provide a relatively neutral background. The resulting expression is directly that of the sturdy but graceful nature of the masonry against the more tenuous and taut nature of the wood. The site commands a megnificent view of English Bay, the North Shore mountains of West Vancouver and the downtown Vancouver skyline to the east. Private south facing courtyards trap the sun and serve as entry courts from the strets. One outdoor and one indoor swimming pool were incorporated for individual owners as well as several roof gardens.</p>
        <h4>The Unit</h4>
        <p>This is a rare residential offer on the “Golden Mile” built during one of Erickson’s most creative periods. The home was the winner of the 1967 National Award for Design. As a Point Grey resident, he created this home to be perfect. To describe this masterpiece, a quote by the Concrete Poet: “Architecture has to be functional but it should allow another dimension than what people are usually content to think about. It should open the perspective of the visitor to something they haven’t experienced before. It shouldn’t be ordinary or pedestrian.” Kept in its precious originality and offered for the first and perhaps, last time...</p>
    </article>
    <div id="extra_images">
        <figure>
            <img src="goldenmile_entry_mini.jpg"/>
            <img src="goldenmile_kitchen_mini.jpg"/>
            <img src="goldenmile_dining2_mini.jpg"/>
            <img src="goldenmile_living2_mini.jpg"/>
            <img src="goldenmile_bedroom_mini.jpg"/>
            <img src="goldenmile_backyard3_mini.jpg"/>
            <img src="goldenmile_deck_mini.jpg"/>
            <img src="goldenmile_view_mini.jpg"/>
        </figure>
    </div>
</div>
</div>

CSS

body {
background-color: #335942;
background-image: url('background.gif');
background-repeat: repeat-y;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 0.875em;
color: #000000;
}

h1 {
color: #FFFFFF;
font-size: 4.5em;
}

h2 {
font-size: 2.25em;
}

h3 {
font-size: 1.5em;
}

h4 {
font-size: 1.142857142857143em;
padding-top: 5px;
}

#wrapper {
max-width: 90%;
margin-top: 2.12765957446809%;
margin-left: 2%;
margin-bottom: 2%;
}

#backer {
background-color: #FFFFFF;
max-width: 70%;
display: table;
padding: 2.12765957446809%;
}

#listing {
margin-bottom: 1%;
}

#main_image {
float: left;
max-width: 74.46808510638298%;
float: left;
}

#listing_info {
width: 15.95744680851064%;
float: right;
}

#bryan {
font-size: 1em;
}

#listing_history {
width: 100%;
clear: both;
padding-top: 10px;
}

#extra_images {
width: 100%;
padding-top: 10px;
text-align: center;
}
4

1 回答 1

3

您首页上的图像是 700 像素宽。在祖先元素上添加所有边距/填充后，它最终会达到大约 763 像素。如果图像要随视口缩放，它们通常采用如下样式：

img {
    max-width: 100%;
}
于 2013-02-11T19:02:55.273 回答