body{
font-family: sans-serif, Georgia, 'Times New Roman', Times, serif
}
header{
text-align: center;
background-color: blanchedalmond;
padding: 10px
}
#photo{
width:25%;
border-radius: 100px;
}
#bio{
background-color: bisque;
}
#work{
background-color: bisque;
}
#projects{
display:flex;
}
.project{
aspect-ratio: 1/1;
outline: dotted;
width: 25%;
display: inline-block;
text-align: center;
margin: 10px;
}
.project img{
width:100%;
}
footer{
background-color: bisque;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Claire McGuinness Profile</title>
<link rel="stylesheet" style="text\css" href="profilestylesheet.css">
</head>
<body>
<header>
<img src="https://cdn2.vectorstock.com/i/1000x1000/54/41/young-and-elegant-woman-avatar-profile-vector-9685441.jpg"
id="photo">
<h1>Claire McGuinness</h1>
<p>Web Developer | Web Designer | Tech Enthusiast</p>
</header>
<main>
<div id="bio">
<h2>About Me</h2>
<p>I am a self taught web developer with a passion for learning and upskilling.
I studied HTML, CSS and Java script using an app called sololearn and I started building websites right away.
Prior to delving into the world of web development, I worked as a registered veterinary nurse in various practices around Dublin.
I studied for 4 years in UCD where I earned my BSc in veterinary nursing.
While in UCD I joing the UCD sub aqua clube which I am still a member of today. During my years at the sub aqua club I took on many committee positions including Trainee rep, training officer and Captain/chairperson.
I am excited to be starting this new chaper of my life and looking forward to learning everying the tech industry has to offer.
</p>
</div><!--bio-->
<div id="work">
<h2>My Work</h2>
<div id="projects">
<div class="project" id="project1">
<a href="sample-blog.html">
<img src="sample-blog.png"></a>
</div><!--Project1-->
<div class="project" id="project2">Project 2</div>
<div class="project" id="project3">Project 3</div>
</div><!--projects-->
</div><!--work-->
</main>
<div>
<br>
</div>
<footer>
Contact me by <a href="[email protected]">email</a>
</footer>
</body>
</html>I'm currently leaning how to build websites using HTML. I'm learning by myself I have no teachers to ask or anything. I'm having an issue with an image that wont resize. When I preview my code on visual studio code the image fits inside the container fine and its following all the rules I have set for it. The issue I am having is when I upload the files to dreamhost. The .png file is located in the root directory and the code img src is the name of that file. I'm really new to all of this and I have probably done a lot wrong so any input would be very helpful. Thank you
I have tried change the CSS file on dreamhost and setting the width of the image in various. nothing seems to affect the size of the image at all.
When I run this code on VSC the image "sample-blog.png" obeys the rules set out for the div container in the css. But when I upload this same code to dreamhost the "sample-blog.png" image doesn't resize at all
Ensure that filepath mentioned in the "src" attribute is correct and you can also try setting the height and width directly in the HTML file itself.
like,
<img src="filename.png" alt="Description of image" width="200" height="150">