我不想尝试自适应设计或响应式设计。我知道有一种方法可以缩小容器的整个尺寸，但我不确定如何做到这一点。我真的很感激有关它如何完成的任何提示和建议。
这就是我想要实现的目标。 http://images.nationalgeographic.com/wpf/media-content/richmedia/1/1143/project/dist/desktop.html
这是我的申请
这是我的包装器的css代码
#entire_container {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
justify-content: center;
text-align: center;
margin:auto;
width:1366px;
height:810px;
border:3px dotted transparent;
border-image: url(SVG/Intro.svg)round 50;
overflow:hidden;
}
答案 0 :(得分：0)
#entire_container {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
justify-content: center;
text-align: center;
margin: auto;
width: 96%;
max-width: 1366px;
height: 810px;
border: 3px dotted transparent;
border-image: url(SVG/Intro.svg)round 50;
overflow: hidden;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="entire_container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quia tempora iste repellat illum, soluta facilis debitis dolorem porro ad possimus accusantium asperiores delectus quam, et magni eos omnis vitae eaque accusamus, facere aspernatur ducimus.
Provident doloremque nisi voluptatum omnis vel sit odio ut excepturi, repellat cumque voluptatibus ratione officia explicabo at sequi eaque modi doloribus accusantium. Dicta temporibus delectus eius nam aspernatur, excepturi corporis eveniet commodi,
qui ut reprehenderit itaque error a necessitatibus vel, libero recusandae aliquam odio voluptatem sapiente. Commodi dignissimos molestias, ut vitae dolor corrupti nobis ipsum illum, eos impedit magni quisquam! Cum fuga nisi, officia vitae quaerat
doloremque reiciendis magni voluptas repellat neque quae explicabo saepe optio voluptatem nesciunt eligendi. Tenetur doloribus, perspiciatis vel, accusamus eligendi doloremque deserunt cum error dignissimos, iusto repudiandae. Corrupti repudiandae
delectus laboriosam minus voluptate cupiditate doloremque cumque, harum perspiciatis quam quia amet assumenda aliquid? Facilis itaque est illo. Distinctio quidem voluptatem blanditiis! Quo illo quidem qui quisquam quas iste cupiditate neque! Et earum
quos, accusamus reiciendis, ipsum autem, at magni vitae voluptate impedit error eligendi quia illum aperiam pariatur animi repellat voluptates! Officiis commodi repellendus ratione quibusdam molestiae perferendis labore, animi atque facilis sint id
quaerat quos rem illum ipsum. Ut nihil amet cupiditate tenetur sequi, magnam dignissimos sed praesentium repellendus voluptas quasi fugit assumenda nemo, libero ex quaerat officia enim est! Autem sed eaque nostrum dolorum doloribus similique perferendis,
earum laudantium error natus adipisci corporis nulla recusandae aperiam fuga incidunt tempore consequuntur iste optio, tempora repudiandae. Dolorem mollitia eius debitis a, eveniet eos excepturi maxime, voluptate aliquid quia totam cumque amet ea,
quaerat accusantium dignissimos quis odio asperiores voluptatum itaque consectetur architecto at! Velit ipsa distinctio qui itaque harum quas ipsam non consectetur corrupti voluptatum earum, est magni. Sit blanditiis veniam voluptatum rem, minima
voluptatibus eligendi facilis quaerat perspiciatis esse corporis ea. Dolorum ullam dignissimos deleniti sit et modi temporibus illo distinctio harum rerum non illum, quam, dolorem sed officia nulla provident quaerat dolores nisi eligendi doloribus
fugit labore quod dolore. Architecto aut, vel dolor commodi reiciendis quibusdam modi? Dolorem minus repellat quidem animi asperiores eos, esse id alias obcaecati, laboriosam ipsum consequatur nulla earum doloremque iure expedita. Deserunt natus nobis
ullam repudiandae nisi saepe odit, explicabo eveniet voluptate odio illum reprehenderit harum commodi est obcaecati quam optio quasi excepturi minima quo vero debitis temporibus hic rerum! A quam, unde nesciunt, hic harum maxime quidem cum ipsam repellendus
animi, repellat minima vitae illum quae facere soluta! At amet porro corrupti modi architecto dolore saepe consequatur excepturi illo optio animi culpa consequuntur in soluta aspernatur, quo, possimus quis esse magnam ipsam laudantium! Consequuntur
eligendi, repellendus ipsa quos molestiae quas cupiditate perferendis iusto sunt laboriosam maxime, veritatis delectus voluptatum placeat possimus tempore fugiat, dolore dolorem natus quae quibusdam est corrupti. Dolorum perferendis sapiente quae
labore doloremque. Praesentium, quos sapiente numquam dignissimos perspiciatis odit, ab ducimus cupiditate voluptates magni reiciendis voluptatibus molestiae aut quod ipsa facere sed. Omnis totam dicta error corrupti ipsum dignissimos, odio vel in
fugit! Praesentium aliquid fuga blanditiis quos, dolorem incidunt repellat corporis voluptates. Unde excepturi similique voluptatum, quidem nemo explicabo perspiciatis facilis consequuntur temporibus quibusdam error vel ex rem minus obcaecati doloribus
consectetur. Inventore corporis id eos, placeat cupiditate soluta reprehenderit architecto quae veritatis blanditiis non eius nulla autem neque ex esse deleniti in? Quas explicabo repudiandae recusandae deleniti nostrum earum officiis veritatis! Mollitia
ducimus et deserunt aut libero a deleniti quos, voluptas quae odit quo corrupti recusandae enim accusantium rem suscipit at, beatae alias, sequi laborum id tenetur consequuntur excepturi labore. Neque reiciendis cupiditate accusantium voluptas incidunt
cum non earum possimus illum eos ratione, eaque ducimus, minus, laborum laboriosam dicta enim aliquid ad tempore. Perspiciatis aliquid ratione dignissimos nulla ex vel delectus quidem, atque cumque facilis quia laborum dolores inventore iste doloribus,
exercitationem nesciunt. Deserunt blanditiis, magni mollitia aperiam ex consectetur aut, laborum voluptas in exercitationem rerum architecto quasi enim modi porro, assumenda quibusdam libero commodi repudiandae ipsam nulla at atque! Ea voluptatum
laborum nobis, cumque quas, fugit sit consectetur, omnis suscipit labore explicabo tenetur atque. Distinctio fuga, delectus totam nam facere consectetur quibusdam laudantium eos at. Iure, excepturi dolor? Aut laborum optio eius numquam dignissimos
blanditiis assumenda ullam, consequatur modi quia illo, voluptates ratione sapiente ipsam nemo! Accusamus deserunt eveniet provident fugiat facere iure nisi nobis numquam nam veritatis laudantium vitae a totam, neque cupiditate voluptatum, minima
maxime error. Saepe magni dignissimos atque porro harum ea fugiat, iusto quod, commodi quo quam, corrupti maiores? Maxime doloribus labore minus, veritatis illum incidunt iure asperiores odio cum facere voluptatem cupiditate architecto tempora nesciunt
nam repellat rem dolorum aliquam ex, ipsa autem quisquam. Provident possimus ut culpa harum hic porro aut, sed vel ea sunt suscipit omnis doloribus inventore, accusantium nulla quis, commodi magnam. Saepe aut vitae delectus maxime nihil magni quam
iusto aspernatur? Odio et, similique, nihil, sint minima atque quaerat eius dolore tempora distinctio quisquam? Maxime ipsa et eveniet voluptates soluta, neque exercitationem ipsum natus deleniti earum totam repellat error reiciendis expedita itaque
consequatur vitae consequuntur corporis delectus modi. Consequatur quidem, tempore reprehenderit excepturi neque quo aliquid molestiae quae nostrum saepe fugit unde voluptatum voluptatem minus facilis consectetur perspiciatis vel sed. Ducimus illo,
quasi sunt corrupti hic nesciunt quas unde tempore perferendis ratione animi temporibus consequuntur blanditiis! Repellendus, explicabo pariatur! Quam consequuntur voluptates ratione architecto est rerum ullam, eius id incidunt laborum! Iure, temporibus
asperiores. Earum illo dolor alias, deleniti quibusdam tempore nesciunt esse. Soluta, optio sit harum dolorum odit ducimus libero delectus natus sequi expedita cumque adipisci, accusantium obcaecati voluptates pariatur quis reprehenderit cum laudantium.
Fuga aliquam maiores necessitatibus illo nulla nostrum exercitationem provident excepturi odit, minima magnam recusandae? Inventore dolores officia unde quo eveniet ex aperiam quaerat. Repellendus numquam deserunt doloribus consequatur vel cupiditate
velit, omnis dolor quaerat unde voluptatibus, iure eligendi temporibus eum fuga explicabo minima non deleniti sunt repellat nisi aspernatur culpa. Atque cumque perspiciatis quaerat fugit ex praesentium impedit veniam nostrum quas exercitationem ullam
voluptas nam dolorem sequi, corporis porro quod soluta numquam molestias beatae? Nihil omnis nostrum magni voluptates eum? Recusandae aperiam cumque sunt alias unde commodi dolore adipisci saepe dolor sed, odit itaque natus autem consequuntur cupiditate
maxime, at totam, a quaerat. Laboriosam qui earum illum excepturi sunt, dolor iusto placeat, minus esse aperiam non culpa, eveniet provident porro cumque cupiditate ratione dolores quisquam iure amet! Ea necessitatibus officiis rerum! Alias voluptatem
explicabo aliquam sunt ea facere illum, quam dolorem distinctio nobis animi qui ab aperiam delectus temporibus sed consequatur deleniti. Magnam enim cum impedit sunt eum nisi, debitis vel maxime quo nam! Soluta eum aperiam consequatur natus officia
incidunt ipsa nulla amet voluptate id? Id est consequatur reiciendis culpa necessitatibus illum. Quam rem laudantium ullam nobis? Quibusdam, itaque a ducimus veniam praesentium ea atque? Cupiditate facilis quia suscipit reiciendis, nulla esse qui
accusantium sapiente voluptatem quae exercitationem voluptatum enim et nesciunt pariatur recusandae iusto ex veritatis a sint ratione est vitae architecto perspiciatis! Optio eius quis ex asperiores? Consequatur sint dolorum odit dolor? Quisquam consequuntur
iusto cupiditate id eum eligendi culpa, alias eius laboriosam, dicta et. Optio, facere eius, repudiandae hic necessitatibus quia dolor commodi doloremque adipisci odio recusandae, ad iusto. Dolores sequi culpa sint quod quia deserunt. Consequuntur
non maiores perferendis ad officia quisquam est saepe, expedita velit. Veritatis dolorum corrupti id consequuntur et libero veniam aliquam labore quis blanditiis. Provident deleniti repudiandae quibusdam, vero aspernatur tenetur, omnis est officia,
non cum iusto sequi dolore neque id aperiam optio quam ea perferendis? Harum minima voluptatum at, excepturi numquam repellat possimus reiciendis voluptatem cum. Nemo quisquam cupiditate voluptatem exercitationem, numquam et ducimus, eius aliquam
aliquid fugiat non maiores, temporibus quo facere. Doloremque perferendis praesentium fugiat laboriosam eum dicta illo consequatur nobis dolorum, ducimus ipsam incidunt quis fuga, autem temporibus amet ea delectus officia. Fugiat doloremque voluptatem
corrupti itaque! Vitae, itaque a! Beatae eligendi debitis maiores tempore doloribus nulla quos minus temporibus voluptatibus quo ad, earum at nobis nihil assumenda veniam atque a ipsam. Facilis esse ipsum sapiente non veritatis dolor saepe tenetur
fugit, rerum qui labore reiciendis modi dignissimos porro natus dicta explicabo adipisci obcaecati autem expedita quod? Commodi culpa earum, aut iusto voluptate mollitia incidunt sed voluptatibus, laborum enim facere ad deleniti voluptas. Obcaecati
praesentium quod minus optio, veniam saepe corrupti nulla repellendus, voluptatum eos inventore, quisquam dolorem dolores cumque. Aliquam explicabo, officia illo ipsa doloremque nulla esse quibusdam dolore dignissimos repellendus facilis amet autem
quaerat exercitationem. Nisi, provident? Quasi ex commodi, officiis deserunt amet debitis culpa ipsum? Eum repellendus libero distinctio ipsam eveniet facilis reiciendis recusandae amet! Maxime doloribus harum sunt dolores nobis nostrum quod ea expedita
quae reprehenderit! Quae sequi repudiandae incidunt illum dignissimos veritatis quibusdam veniam adipisci culpa dolorem assumenda cupiditate sint sunt recusandae quia tenetur quos in, velit quidem qui nobis. Quidem, facilis officiis quae necessitatibus
ipsam ipsum cupiditate magnam hic harum ex similique delectus saepe repellendus repellat consequuntur modi aperiam non sunt vero consequatur laudantium animi! Laborum dignissimos dolor dolorem sequi atque porro reiciendis repudiandae sapiente veritatis
pariatur? Nisi voluptas distinctio nam libero perspiciatis? Ex magnam dolorem, fugit praesentium consequatur alias sequi voluptatibus distinctio rem temporibus dolore repellat quam quia nam vero eius quo, soluta quidem ipsum voluptates quibusdam porro!
Iste, itaque, nihil cumque eos error numquam, voluptate eligendi atque incidunt eius ipsa corrupti! Quam ab autem labore explicabo laboriosam corporis veritatis exercitationem mollitia eligendi! Sed hic facere necessitatibus reiciendis accusantium
ab quis dolor veritatis enim. Veritatis, ab harum. Et suscipit nesciunt magnam beatae saepe at. Minus nihil quod repellendus quam a quos magnam voluptatem quaerat, dolorem quia nobis nostrum, unde facilis amet? Illo distinctio molestias officia, commodi
dolorem reiciendis officiis a quas amet velit adipisci autem eos, deleniti eveniet quae laboriosam esse nulla similique dolor enim perspiciatis sequi nisi at. Aut incidunt repellat eveniet suscipit numquam, vel animi officia tenetur autem. Doloribus
beatae minus fuga magni nihil eius laborum voluptatum sed, similique doloremque placeat? Vel molestias neque id, sint quidem eligendi architecto voluptates dolores in asperiores dolorem? Aperiam sequi totam nobis, eaque perferendis facere quae ipsa
delectus itaque earum provident excepturi nihil consequuntur debitis ratione magni rerum odit dignissimos explicabo ab est sit. Laborum at incidunt, placeat reiciendis quidem beatae. Quod perspiciatis ea quia maxime sint id at itaque aut, illum doloremque
quos voluptate facere, maiores qui sunt voluptatibus excepturi. Minima libero cum blanditiis, dignissimos amet quidem placeat quia. Facilis sunt culpa soluta deleniti! Neque, eveniet repellat recusandae odio nobis sint, aliquid laboriosam sed alias
inventore quis rem qui, voluptas similique odit impedit officia praesentium quas? Mollitia sunt a voluptatem repellat exercitationem sit perferendis quibusdam nam odit quasi, fugiat iure rerum architecto vero obcaecati magnam, molestiae fugit, nulla
qui? Consectetur facilis, odit cumque voluptate voluptas pariatur nobis ducimus aliquam, assumenda deserunt officia voluptates magnam, non eligendi dolore in facere veniam ipsa aliquid. Nesciunt ad commodi nisi minima ex minus praesentium. Saepe laborum
qui odio delectus cumque culpa optio molestiae magni nulla incidunt, asperiores, expedita illo ad non quaerat et quos! Aperiam adipisci sapiente porro nesciunt voluptates ipsum error? Ex ducimus distinctio sunt minus in sequi totam, dolor sed eveniet
cum autem praesentium fuga cumque obcaecati at ullam officia perspiciatis omnis voluptates expedita, nostrum unde architecto delectus? Facere nihil similique nobis quam corporis animi atque explicabo, quasi minima tenetur ratione, iure adipisci quod
alias vitae minus eos officiis. Esse sed eligendi accusamus! Deleniti nobis impedit nihil, ipsam harum inventore illo nesciunt assumenda officiis, sunt, voluptate aliquid aspernatur quidem quas doloremque incidunt repellendus delectus vitae repudiandae
autem eligendi. Voluptatibus harum deleniti praesentium dolorem, eaque enim, reiciendis perspiciatis delectus aperiam quas cupiditate illum quam quaerat veniam, molestiae ea nam! Dolor odit quae officiis saepe, nulla ea dolore mollitia recusandae
distinctio magni fuga ratione voluptatum repudiandae laboriosam fugiat iusto quis aperiam explicabo temporibus quibusdam natus repellendus sit? Iste fuga repellendus molestias nam, inventore totam? Fuga velit blanditiis incidunt excepturi debitis
consequatur perspiciatis esse laboriosam obcaecati, asperiores aliquid voluptatum molestias inventore deserunt cumque tenetur culpa, aperiam hic autem alias ipsam libero deleniti ut? Dignissimos, molestiae? Labore sunt quod eos quas adipisci aspernatur
earum laudantium necessitatibus voluptates quam molestias officia est sapiente natus ipsum, eligendi tempore nisi. Veritatis?
</div>
</body>
</html>
正如Adam在评论中提到的，您只需要在CSS中更改容器width和max-width属性。
在您的代码段中，width: 1366px导致浏览器在您的网站中创建该水平滚动条，因此使用max-width: 1366px和width: ${unit}%将允许您拥有一个没有丑陋的响应式容器滚动条。
据我所知，这种技术在响应式网页设计世界非常流行。
还有一件事，我在这里不使用width: 100%是因为您通常希望在内容和浏览器框架之间留一些空白。希望这有帮助！