Image Sizing / Auto-Sizing Linked Image


#1

When I customized my Airbnb website by linking a picture from google. The image was too large. Is there a code to auto-size the image to meet set proportions?

Thanks


#2

This question is to vague, more details are required, did you use thumbnails?

<div class="thumbnail">
  <img src="#">
</div>

if you don't, the images might become to big. Here is why thumbnails are important from the bootstrap css file:

.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img
{
    display:block;
    max-width:100%;
    height:auto
}
.thumbnail
{
    display:block;
    padding:4px;
    margin-bottom:20px;
    line-height:1.42857143;
    background-color:#fff;
    border:1px solid #ddd;
    border-radius:4px;
    -webkit-transition:border .2s ease-in-out;
    -o-transition:border .2s ease-in-out;
    transition:border .2s ease-in-out
}
.thumbnail a>img,.thumbnail>img
{
    margin-right:auto;
    margin-left:auto
}

As you can see, thumbnails does a lot to keep the images nicely organized


#3

Hi,

I'm sorry, no thumbnail, but a background image. Below is my CSS code. The system won't allow me to paste the html because I'm a new user, but I was referring to the last exercise in the "make a website" lesson (last section on bootstrap). You are told to customize the website by changing the text and adding in your own image links. I pulled the background image from google.

Please let me know if you need more info. Thanks for your help.

main.css

.jumbotron {
background-image:url('http://www.purple-papaya-films.com/upload/image/Paris%20Landmarks/Le-Pont-Alexandre-III-Pont-Paris.jpg');
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}


#4

i need more, in fact, i need all. Elements work together, so for me to help you, i need both html + css code


#5

The forum system keeps telling me I can't paste everything because I'm new.

1.) I've pasted the html code for the jumbtron only. I didn't make any changes/customizations to it.
2.) Next I've pasted the full main.css code.

If you want the full page I will have to send you individual replies. (The system says that you can only have one image in your post when you are new.)

*If you are able to access the learning / exercise page it's "Make a Website: Bootstrap."

Let me know if I should keep pasting and sending the rest. Sorry this is so difficult.

****************SYSTEM (jumbotron only) ********************

<!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">
    
  </head>

  <body>
    <div class="nav">
      <div class="container">
        <ul class= "pull-left">
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
        </ul>
        <ul class=pull-right>
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Q&A</a></li>
        </ul>
      </div>
    </div>

    <div class="jumbotron">
    <div class="container">
    <h1> Paris, France. </h2>
    <p> Rent unique places to stay in more than +190 countries.
    </div>
        </div>
    <div class="neighborhood-guides">     
           <div class="container"
           <h2>Neighborhood Guides </h2>
           <p> Not sure where to stay? We've created neighborhood guides for cities all around the world. </p>
           <div class="row">

*************SYSTEM***********

main.css
.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
  display: inline;
}

.jumbotron {
  background-image:url('http://goo.gl/04j7Nn');
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
}

.jumbotron .container {
  position: relative;
  top:100px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.jumbotron p {
  font-size: 20px;
  color: #fff;
}

***********MY CHANGES******

main,css
.jumbotron {
  background-image:url('http://www.purple-papaya-films.com/upload/image/Paris%20Landmarks/Le-Pont-Alexandre-III-Pont-Paris.jpg');
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
}

#6

Oh, you didn't make that much changes, sorry. I will look into, i first will go through my other notifications, will be back within the hour

use on of the following ways to format your code, then you can have many images:

select your code and press ctrl + shift + c (or cmd + shift + c if you use a mac)

if this instructions are unclear, you can also insert 3 backticks before and after your code, like so:

```
<p>visible</p>
```

the backtick is located above the tab key on your keyboard

If you edit your code, leave a reply so i get a notification, i edited your answer, so you can see how it is done


#7

i put your code in a bin (link), i think it looks good, what is wrong with it?


#8

I'm having a similar issue. I chose several different image sizes from google and it seems to mess with the layout. Is there some additional coding I need to add to my <div class="thumbnail">'s

index.html:

<!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">
    
  </head>

  <body>
    <div class="nav"> <!-- start nav -->
    
      <div class="container"> <!-- start nav container -->
        
        <ul class="pull-left">
          <li><a href="#">Name</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        
        <ul class="pull-right">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      
      </div> <!-- close nav container -->
      
    </div> <!-- close nav -->

    <div class="jumbotron"> <!-- start jumbotron -->
    
      <div class="container"> <!-- start jumbotron container -->
      
        <h1>Discover new neighborhoods.</h1>
        <p>Rent from residents in over 34,000 communities
           and 192 countries.</p>
        <a href="#">Learn More</a>
        
      </div><!-- close jumbotron container -->
      
    </div> <!-- close jumbotron -->
    
    <div class="neighborhood-guides"> <!-- start neighborhood-guides -->
    
     <div class="container"> <!-- start neighborhood-guides container -->
     
      <h2>Neighborhood Guides</h2>
      <p>Not sure where to stay? We've created neighborhood guides for cities           all around the world.</p>
      
      <div class="row"> <!-- start row -->
        
        <div class="col-md-4"> <!-- start 1st colomn -->
        
          <div class="thumbnail">
            <img src="http://www.trekamerica.com/images/3946.jpg">
          </div> <!-- image: Mexico -->
          
          <div class="thumbnail">
            <img src="https://static.pexels.com/photos/2324/skyline-buildings-new-york-skyscrapers-large.jpg">
          </div> <!-- image: New York -->
        
        </div> <!-- close 1st colomn -->
        
        <div class="col-md-4"> <!-- start 2nd colomn -->
        
          <div class="thumbnail">
            <img src="http://www.thesundaytimes.co.uk/sto/multimedia/dynamic/00247/tokyo-main_247542k.jpg">
          </div> <!-- image: Tokyo -->
          
          <div class="thumbnail">
            <img src="http://travelnoire.com/wp-content/uploads/2014/02/Eiffel-Tower-Paris-France-1050x700.jpg">
          </div> <!-- image: Paris -->
        
        </div> <!-- close 2nd colomn -->
       
        <div class="col-md-4"> <!-- start 3rd colomn -->
        
          <div class="thumbnail">
            <img src="http://www.layoverguide.com/wp-content/uploads/2010/12/Golden-Gate-Bridge-in-San-Francisco-bay.jpg">
          </div> <!-- image: Invite friends, earn travel credit -->
        
        </div> <!-- close 3rd colomn -->
        
      </div> <!-- close row -->
      
     </div> <!-- close neighborhood-guides container -->
     
    </div> <!-- close neighborhood-guides -->
    
    <div class="learn-more"> <!-- start learn-more -->
    
	  <div class="container"> <!-- start learn-more container -->
	  
		<div class="row"> <!-- start learn-more row -->
		
	      <div class="col-md-4"> <!-- start 1st column -->
	      
			<h3>Travel</h3>
			<p>From apartments and rooms to treehouses and boats: stay in                     unique spaces in 192 countries.</p>
			<p><a href="#">See how to travel on Airbnb</a></p>
			
	      </div> <!-- close 1st column -->
	      
		  <div class="col-md-4"> <!-- start 2nd column -->
		  
			<h3>Host</h3>
			<p>Renting out your unused space could pay your bills or fund your                next vacation.</p>
			<p><a href="#">Learn more about hosting</a></p>
			
		  </div> <!-- close 2nd column -->
		  
		  <div class="col-md-4"> <!-- start 3rd column -->
		  
			<h3>Trust and Safety</h3>
			<p>From Verified ID to our worldwide customer support team, we've                 got your back.</p>
			
		  </div> <!-- close 3rd column -->
			
			<p><a href="#">Learn about trust at Airbnb</a></p>
			
			
		  </div> <!-- close learn-more row -->
	    
	  </div> <!-- close learn-more container -->
	  
	</div> <!-- close learn-more -->
  </body>
</html>

main.css:

.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
  display: inline;
}

.jumbotron {
  background-image:url('https://upload.wikimedia.org/wikipedia/commons/6/67/Inside_the_Batad_rice_terraces.jpg');
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
}

.jumbotron .container {
  position: relative;
  top:100px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.jumbotron p {
  font-size: 20px;
  color: #fff;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}

.neighborhood-guides {
  background-color: #efefef;
  border-bottom: 1px solid #dbdbdb;
}

.neighborhood-guides h2 {
  color: #393c3d;
  font-size: 24px;
}

.neighborhood-guides p {
  font-size: 15px;
  margin-bottom: 13px;
}

please advise :smile:


#9

One of the most frustrating for programmers: Clients with vague description what they want. What do you want it to look like? I think the easiest thing would be to resize the image in some program, so they fit nicely, hopefully. The moment you destroy your image ratio, it becomes a mess


#10

Notice in your main.css in the jumbotron section you have

height=500px

the problem with the image is its too thin to fit the page. so when you go to full screen the image will be stretched to backround-size="cover" and cut off the bottom of the image.

if you find a 1500x500 picture it'll look better. however it will only take images off of google so an image editor is out of the question

I hope this helps!