是什么使最后一张照片与其余照片相比如此大?

时间:2018-07-19 12:21:38

标签: html css

    body {
      background-color:olive;
      margin:0;
    }



    nav {
      background-color:aqua;
      position:sticky;
      top:0;
      border:1px solid red;
    }
    
    #container{
      max-height:1800px;
      display:flex;
      flex-direction:row;

      
    }

     a {
      
      background-color:chocolate;
      padding:7px;
      border-radius:10px; 
      text-decoration:none;
    }

    #container > a:hover{
      opacity:0.5;
    }

    #item-2, #item-3, #item-1, #item-0 {
     align-self:flex-start;
     margin-top:5px;
    }

    #logout {
     margin-left:auto;
    }

    .bonus {
       margin-left:10px;
     }
    /* nav is finally done after 1.5 hours lol and another 30mins  */

    #bear-nest {
      display:flex;
      flex-direction:row;
      justify-content:flex-end;
      align-items:center;
    }

    .theme {
      border-radius:20%;
     display: block;
margin-left: auto;
margin-right: auto;}


    #bear{
      text-align:center;
      margin-left:auto;
      margin-right:auto;
      width:70%;
    }

    hr {
      border: 1px solid black;
    }



    .middle {
      display:flex;
      justify-content:center;
     align-self:flex-start;
     font-weight:bold;
    }

    .tags {
      font-family: monospace;
      background-color:blue;
      display:inline-block;
      color:white;
      padding:0px 40px 0 15px;
      margin-top:15px;
    }
    
<body>

  <img src=https://images.unsplash.com/photo-1531870972494-627796a756dc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=72a43beae93d56392f98f6eda2cdd8cb&auto=format&fit=crop&w=500&q=60 width="100%" height="150" "border-radius:40px">
<nav>
  <div id="main-content">
  <div id="container" >
    <a id="main" href="#" style="background-color:#bad455">Main</a>
    <a id="information" class="bonus" href="information.html">Information</a>
    <a id="contacts" class="bonus" href="contacts.html">Contacts</a>
    <a id="media" class="bonus" href="media.html">Media</a>
    <a id="logout" href="logout.html">Log out</a>
    
</div>
  </div>
</nav>

<main>
  <div id="bear-nest">
  <div id="american-bear-nest">
    <div class="tags">
      <p>Bears</p>
    </div>

    <div class="middle">
      <p>The American black bear</p>
    </div>
    <img class="theme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/01_Schwarzb%C3%A4r.jpg/220px-01_Schwarzb%C3%A4r.jpg" alt="bear" title="The American black bear">
    <div id="bear"><p>The American black bear (Ursus americanus) is a medium-sized bear native to North America. It is the continent's smallest and most widely distributed bear species. Black bears are omnivores, with their diets varying greatly depending on season and location. They typically live in largely forested areas, but do leave forests in search of food. Sometimes they become attracted to human communities because of the immediate availability of food. The American black bear is the world's most common bear species.

    It is listed by the International Union for Conservation of Nature (IUCN) as a least-concern species, due to its widespread distribution and a large population estimated to be twice that of all other bear species combined. Along with the brown bear, it is one of only two of the eight modern bear species not considered globally threatened with extinction by the IUCN. American black bears often mark trees using their teeth and claws as a form of communication with other bears, a behavior common to many species of bears.</p></div>

    <div class="middle">
      <p >Asian black bear</p>
    </div>
    <img class="theme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/220px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG" alt="asian bear" title="Asian black bear">
    <div id="bear"><p>The Asian black bear (Ursus thibetanus, previously known as Selenarctos thibetanus), also known as the moon bear and the white-chested bear, is a medium-sized bear species native to Asia and largely adapted to arboreal life.[2][3] It lives in the Himalayas, in the northern parts of the Indian subcontinent, Korea, northeastern China, the Russian Far East, the Honshū and Shikoku islands of Japan, and Taiwan. It is classified as vulnerable by the International Union for Conservation of Nature (IUCN), mostly because of deforestation and hunting for its body parts.[1]

The species is morphologically very similar to some prehistoric bears, and is thought by some scientists to be the ancestor of other extant bear species (aside from pandas and spectacled bears).[2] Though largely herbivorous, Asian black bears can be very aggressive toward humans, who frequently trap or kill them for traditional medicine.[4] </p></div>
    
    <hr>

    <div class="tags">
      <p>Turtles</p>
    </div>
    <div class="middle">
     <p> Green sea turtle</p>
    </div>
    <img class="theme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Green_turtle_swimming_over_coral_reefs_in_Kona.jpg/220px-Green_turtle_swimming_over_coral_reefs_in_Kona.jpg" alt="green turtle" title="Green sea turtle">

    <div id="bear"><p>The green sea turtle (Chelonia mydas), also known as the green turtle, black (sea) turtle or Pacific green turtle,[3] is a large sea turtle of the family Cheloniidae. It is the only species in the genus Chelonia.[4] Its range extends throughout tropical and subtropical seas around the world, with two distinct populations in the Atlantic and Pacific Oceans, but it is also found in the Indian Ocean.[5][6] The common name comes from the usually green fat found beneath its carapace[citation needed]; these turtles' shells are olive to black.

This sea turtle's dorsoventrally flattened body is covered by a large, teardrop-shaped carapace; it has a pair of large, paddle-like flippers. It is usually lightly colored, although in the eastern Pacific populations parts of the carapace can be almost black. Unlike other members of its family, such as the hawksbill sea turtle, C. mydas is mostly herbivorous. The adults usually inhabit shallow lagoons, feeding mostly on various species of seagrasses.[7] The turtles bite off the tips of the blades of seagrass, which keeps the grass healthy.

Like other sea turtles, green sea turtles migrate long distances between feeding grounds and hatching beaches. Many islands worldwide are known as Turtle Island due to green sea turtles nesting on their beaches. Females crawl out on beaches, dig nests and lay eggs during the night. Later, hatchlings emerge and scramble into the water. Those that reach maturity may live to 80 years in the wild.[5]

C. mydas is listed as endangered by the IUCN and CITES and is protected from exploitation in most countries.[8] It is illegal to collect, harm or kill them. In addition, many countries have laws and ordinances to protect nesting areas. However, turtles are still in danger due to human activity. In some countries, turtles and their eggs are hunted for food. Pollution indirectly harms turtles at both population and individual scales, as well as light pollution. Many turtles die after being caught in fishing nets. Also, real estate development often causes habitat loss by eliminating nesting beaches. </p></div>

  <div class="middle">
    <p>African spurred tortoise</p>
  </div>
  <img class="theme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Sulcata_Tortoise_%285%29_%288679964197%29.jpg/220px-Sulcata_Tortoise_%285%29_%288679964197%29.jpg" alt="spurred-turtle" title="African spurred tortoise">
  <p id="bear">The African spurred tortoise (Centrochelys sulcata), also called the sulcata tortoise, is a species of tortoise, which inhabits the southern edge of the Sahara desert, in Africa. It is the third-largest species of tortoise in the world, the largest species of mainland tortoise, and the only extant species in the genus Centrochelys. <br>
  The African spurred tortoise is native to the Sahara Desert and the Sahel, a transitional ecoregion of semiarid grasslands, savannas, and thorn shrublands found in the countries of Burkina Faso, Chad, Eritrea, Ethiopia, Mali, Mauritania, Nigeria, Senegal, and Sudan[1] In these arid regions, the tortoise excavates burrows in the ground to get to areas with higher moisture levels, and spends the hottest part of the day in these burrows.[3] This is known as aestivation. Burrows may average 30 inches in depth; some dig tunnel systems extending 10 feet or more underground.[3] There is a variant of this tortoise in Sudan, they differ by having a bigger overall body and shell. </p>

  <div class="middle">
    <p>African spurred tortoise</p>
  </div>
  <img class="theme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/RedEaredSlider05.jpg/1280px-RedEaredSlider05.jpg" alt="red-eared-turtoise" title="Red-eared slider">
  <p id="bear">The red-eared slider (Trachemys scripta elegans), also known as the red-eared terrapin, is a semiaquatic turtle belonging to the family Emydidae. It is a subspecies of the pond slider. It is the most popular pet turtle in the United States and is also popular as a pet in the rest of the world.[2] It has, therefore, become the most commonly traded turtle in the world.[3] It is native to the southern United States and northern Mexico, but has become established in other places because of pet releases, and has become an invasive species in many areas, where it outcompetes native species. The red-eared slider is included in the list of the world's 100 most invasive species[4] published by the IUCN. </p>


</div>
</div>



</main>
  

  
</body>

    body {
      background-color:olive;
      margin:0;
    }



    nav {
      background-color:aqua;
      position:sticky;
      top:0;
      border:1px solid red;
    }
    
    #container{
      max-height:1800px;
      display:flex;
      flex-direction:row;

      
    }

     a {
      
      background-color:chocolate;
      padding:7px;
      border-radius:10px; 
      text-decoration:none;
    }

    #container > a:hover{
      opacity:0.5;
    }

    #item-2, #item-3, #item-1, #item-0 {
     align-self:flex-start;
     margin-top:5px;
    }

    #logout {
     margin-left:auto;
    }

    .bonus {
       margin-left:10px;
     }
    /* nav is finally done after 1.5 hours lol and another 30mins  */

    #bear-nest {
      display:flex;
      flex-direction:row;
      justify-content:flex-end;
      align-items:center;
    }

    .theme {
      border-radius:20%;
     display: block;
margin-left: auto;
margin-right: auto;}


    #bear{
      text-align:center;
      margin-left:auto;
      margin-right:auto;
      width:70%;
    }

    hr {
      border: 1px solid black;
    }



    .middle {
      display:flex;
      justify-content:center;
     align-self:flex-start;
     font-weight:bold;
    }

    .tags {
      font-family: monospace;
      background-color:blue;
      display:inline-block;
      color:white;
      padding:0px 40px 0 15px;
      margin-top:15px;
    }
<body>

  <img src=https://images.unsplash.com/photo-1531870972494-627796a756dc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=72a43beae93d56392f98f6eda2cdd8cb&auto=format&fit=crop&w=500&q=60 width="100%" height="150" "border-radius:40px">
<nav>
  <div id="main-content">
  <div id="container" >
    <a id="main" href="#" style="background-color:#bad455">Main</a>
    <a id="information" class="bonus" href="information.html">Information</a>
    <a id="contacts" class="bonus" href="contacts.html">Contacts</a>
    <a id="media" class="bonus" href="media.html">Media</a>
    <a id="logout" href="logout.html">Log out</a>
    
</div>
  </div>
</nav>

<main>
  <div id="bear-nest">
  <div id="american-bear-nest">
    <div class="tags">
      <p>Bears</p>
    </div>

    <div class="middle">
      <p>The American black bear</p>
    </div>
    <img class="theme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/01_Schwarzb%C3%A4r.jpg/220px-01_Schwarzb%C3%A4r.jpg" alt="bear" title="The American black bear">
    <div id="bear"><p>The American black bear (Ursus americanus) is a medium-sized bear native to North America. It is the continent's smallest and most widely distributed bear species. Black bears are omnivores, with their diets varying greatly depending on season and location. They typically live in largely forested areas, but do leave forests in search of food. Sometimes they become attracted to human communities because of the immediate availability of food. The American black bear is the world's most common bear species.

    It is listed by the International Union for Conservation of Nature (IUCN) as a least-concern species, due to its widespread distribution and a large population estimated to be twice that of all other bear species combined. Along with the brown bear, it is one of only two of the eight modern bear species not considered globally threatened with extinction by the IUCN. American black bears often mark trees using their teeth and claws as a form of communication with other bears, a behavior common to many species of bears.</p></div>

    <div class="middle">
      <p >Asian black bear</p>
    </div>
    <img class="theme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/220px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG" alt="asian bear" title="Asian black bear">
    <div id="bear"><p>The Asian black bear (Ursus thibetanus, previously known as Selenarctos thibetanus), also known as the moon bear and the white-chested bear, is a medium-sized bear species native to Asia and largely adapted to arboreal life.[2][3] It lives in the Himalayas, in the northern parts of the Indian subcontinent, Korea, northeastern China, the Russian Far East, the Honshū and Shikoku islands of Japan, and Taiwan. It is classified as vulnerable by the International Union for Conservation of Nature (IUCN), mostly because of deforestation and hunting for its body parts.[1]

The species is morphologically very similar to some prehistoric bears, and is thought by some scientists to be the ancestor of other extant bear species (aside from pandas and spectacled bears).[2] Though largely herbivorous, Asian black bears can be very aggressive toward humans, who frequently trap or kill them for traditional medicine.[4] </p></div>
    
    <hr>

    <div class="tags">
      <p>Turtles</p>
    </div>
    <div class="middle">
     <p> Green sea turtle</p>
    </div>
    <img class="theme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Green_turtle_swimming_over_coral_reefs_in_Kona.jpg/220px-Green_turtle_swimming_over_coral_reefs_in_Kona.jpg" alt="green turtle" title="Green sea turtle">

    <div id="bear">The green sea turtle (Chelonia mydas), also known as the green turtle, black (sea) turtle or Pacific green turtle,[3] is a large sea turtle of the family Cheloniidae. It is the only species in the genus Chelonia.[4] Its range extends throughout tropical and subtropical seas around the world, with two distinct populations in the Atlantic and Pacific Oceans, but it is also found in the Indian Ocean.[5][6] The common name comes from the usually green fat found beneath its carapace[citation needed]; these turtles' shells are olive to black.

This sea turtle's dorsoventrally flattened body is covered by a large, teardrop-shaped carapace; it has a pair of large, paddle-like flippers. It is usually lightly colored, although in the eastern Pacific populations parts of the carapace can be almost black. Unlike other members of its family, such as the hawksbill sea turtle, C. mydas is mostly herbivorous. The adults usually inhabit shallow lagoons, feeding mostly on various species of seagrasses.[7] The turtles bite off the tips of the blades of seagrass, which keeps the grass healthy.

Like other sea turtles, green sea turtles migrate long distances between feeding grounds and hatching beaches. Many islands worldwide are known as Turtle Island due to green sea turtles nesting on their beaches. Females crawl out on beaches, dig nests and lay eggs during the night. Later, hatchlings emerge and scramble into the water. Those that reach maturity may live to 80 years in the wild.[5]

C. mydas is listed as endangered by the IUCN and CITES and is protected from exploitation in most countries.[8] It is illegal to collect, harm or kill them. In addition, many countries have laws and ordinances to protect nesting areas. However, turtles are still in danger due to human activity. In some countries, turtles and their eggs are hunted for food. Pollution indirectly harms turtles at both population and individual scales, as well as light pollution. Many turtles die after being caught in fishing nets. Also, real estate development often causes habitat loss by eliminating nesting beaches. </div>

  









</div>
</div>



</main>
  

  
</body>

您好,有一种方法可以使最后一张图片的尺寸与上面的图片完全相同吗?因为一旦我添加了它就完全变大了。我不知道该怎么解决。我知道可以在img标签内更改宽度和高度,但是我不知道其余图片的大小是多少,所以它不起作用。感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

图像自然较大。您可以将以下CSS添加到样式表中,并且它们的大小都相同:

img.theme {
width: 200px;
}

将200px更改为您想要的大小:)