0

そのため、Web サイトが 763px を超えて縮小し続けるのに問題があります。ピクセルではなくパーセンテージと 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

フロントページの画像の幅は 700px です。祖先要素にすべてのマージン/パディングを追加すると、約 763px になります。画像がビューポートに合わせてスケーリングされる場合、通常は次のようにスタイル設定されます。

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