How do I add an image from another website
to my .html but make image smaller, e.g. thumbnail size or avatar size, on my page. I have tried with css such as img element and giving it 50% for width and height, but did not work. I also tried a few other things, as well as have googled for answer and read many articles, but still no answer.
Please help.
Thanks,
Hal Jordan
Perhaps you can show us the actual CSS you used? I just opened the dev tools inspector and was able to reduce the display size using width. If you only need to display it as a thumbnail then it might be better to just use an image editor to make it smaller, which will reduce the file size as well. That way you don’t have to send so much over the wires for such a small image.
Well it’s for my Tribute page project on CSS portion. There is no images folder so that’s why I’m having to use images from another site.
img {
max-width: 50%;
max-height: 50%;
display: block;
margin: 0 auto;
}
OK that makes sense. Can you provide us with a link to your tribute page code?
I added img portion to edit on last message to you. However, it’s only one of many different versions of that portion of the code I’ve tried.
Giving us a code snippet like that might not give us enough information to help you. That snippet looks like it should work but if it is not then obviously there is something else going on that we don’t know about because we can’t see your actual page. Can you provide us with a link to your tribute page?
I’m trying to change the ul → li comic book image to say width 150px and height 225px.
So that link just goes to the tribute page challenge but it doesn’t show us your code. You’ll need to paste it in here. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Or you can click the </> button above the editor window with your cursor on a line by itself.
I’m trying to change the ul → li comic book image to width 150px and height 225px.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main id="main">
<h1 id="title">Stan Lee</h1>
<p>The visionary of Living Fantasy</p>
<figure id="img-div">
<img id="image" src="https://live.staticflickr.com/65535/52399987665_4ffcce3f3b_b.jpg" alt="Image of Stan Lee Writer and editor of Marvel Comics">
<figcaption id="img-caption">
<strong>Stan Lee: </strong> Marvel Comics writer, editor, publisher, and producer of Marvel Comics. Co-created Spider-Man, Iron Man Thor, Hulk, Ant-Man, the Wasp, Fantastick Four Black Panther, Daredevil, Doctor Strange, and others. f
</figcaption>
<section id="tribute-info">
<h3 id="headline">Here are some of Stan Lee's most famous Comic Books: </h3>
<ul>
<li>Spider-Man! (Amazing Fantasy #15)<img src="https://13thdimension.com/wp-content/uploads/2018/11/Spider-Man-580x871.jpg" alt="Front cover of Spiderman's first appearance in a comicbook Amazing Fantasy number 15 August 15, 1962"></li>
<li>The Fantastic Four (Fantastic Four #1) <img src=""></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<blockquote cite="http://news.rediff.com/report/2009/sep/14/pm-pays-tribute-to-father-of-green-revolution-borlaug.htm">
<p>
</p>
<cite></cite>
</blockquote>
<h3>
You should make time to read more about this Renaissance man on his
<a id="tribute-link" href="https://en.wikipedia.org/wiki/Stan_Lee" target="_blank">Wikipedia entry</a>.
</h3>
</section>
</figure>
</main>
</body>
</html>
html {
/* Setting a base font size of 10px give us easier rem calculations
Info: 1rem === 10px, 1.5rem === 15px, 2rem === 20px and so forth
*/
font-size: 10px;
}
body {
/* Native font stack https://getbootstrap.com/docs/4.2/content/reboot/#native-font-stack */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Helvetica Neue', Arial, sans-serif;
font-size: 1.6rem;
line-height: 1.5;
text-align: center;
color: #333;
margin: 0;
}
h1 {
font-size: 4rem;
margin-bottom: 0;
}
@media (max-width: 460px) {
h1 {
font-size: 3.5rem;
line-height: 1.2;
}
}
h2 {
font-size: 3.25rem;
}
a {
color: #477ca7;
}
a:visited {
color: #74638f;
}
#main {
margin: 30px 8px;
padding: 15px;
border-radius: 5px;
background: #eee;
}
@media (max-width: 460px) {
#main {
margin: 0;
}
}
/* img {
max-width: 100%;
display: block;
height: auto;
margin: 0 auto;
} */
img {
width: 50%;
height: 50%;
display: block;
margin: 0 auto;
}
#img-div {
background: white;
padding: 10px;
margin: 0;
}
#img-caption {
margin: 15px 0 5px 0;
}
@media (max-width: 460px) {
#img-caption {
font-size: 1.4rem;
}
}
#headline {
margin: 50px 0;
text-align: center;
}
ul {
max-width: 550px;
margin: 0 auto 50px auto;
text-align: left;
line-height: 1.6;
}
li {
margin: 16px 0;
}
li:nth-child(1) {
max-width: 150px;
max-height: 225px;
}
blockquote {
font-style: italic;
max-width: 545px;
margin: 0 auto 50px auto;
text-align: left;
}```Two things:
“Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS”
li:nth-child(1) {...}
Don’t you want to target the image in the first list item? You are only targeting the first list item here.
I had been working in VS code and was copying and pasting my code back in fcc lesson page and I didn’t even notice my href was off, because normally I have a css directory. I got it working after that.
Thanks
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.