Question

所以我无法让我的网站继续缩小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;
}

Answer 1

首页上的图片宽度为700px。在祖先元素上添加所有边距/填充后，最终会出现大约763px。如果图像要与视口一起缩放，则它们的样式通常如下：

img {
    max-width: 100%;
}

响应式设计：网站不会缩小到763px

1 个答案: