Struggling to contain the image inside my div element

Question

Struggling to contain the image inside my div element

I'm having trouble with keeping the image inside my div element as it keeps stretching outside of it. I've tried researching for a solution but haven't been successful in finding one. Any help would be greatly appreciated!

Here is the HTML/CSS code snippet...

.navigation {
    padding-top: 70px;
    padding-bottom: 70px;
    position: relative;
    text-transform: uppercase;

}

.container {

}

.brand-text {
    font-family: Georgia, Times, 'Times New Roman', serif;
    font-size: 40px;
    font-weight: 700px;
    color: black;
    -webkit-transition: color 700ms ease;
    text-align: center;

}

.brand-text:hover {
    color: grey;
}

.nav-brand {
    text-decoration:none;
}

.nav-menu {
    text-align: center;
}

.nav-link {
    padding-top: 7px;
    padding-bottom: 7px;
    margin-right: 20px;
    margin-left: 20px;
    text-decoration: none;
    color: black;
    font-family: Georgia, Times, 'Times New Roman', serif;
    -webkit-transition: color 700ms ease;
    position: relative;
}

.nav-link:hover {
    color: grey;
}

a {
    text-decoration: none;
}

div.img {
    margin: 5px;
    float: left;
    width: 180px;
    -webkit-transition: opacity 400ms ease, box-shadow 400ms ease;
    transition: opacity 400ms ease, box-shadow 400ms ease;
    background-color: #fff;
}

div.img:hover {
    background-color: transparent;
    box-shadow: 0 0 50px -14px #000;
    opacity: 0.8;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    text-align: center;
    color: black;
    padding: 15px;
}

* {
    box-sizing: border-box;
}

@media only screen and (max-width: 700px){
    .reponsive {
        width: 49.999999%;
        margin: 6px;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%
    }
}

.clearfix:after {
    content: "";
    display: table;
}

<!DOCTYPE html>
<html>
<head>
<title>Josh Corbett</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="navigation">
<div class="container">
<a class="nav-brand" href="#"><h1 class="brand-text">Josh Corbett</h1></a>
<nav class="nav-menu" role="navigation">
<a class="nav-link" href="#">Portfolio</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">Blog</a>
</nav>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="#">
<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">
<div class="desc">Beautiful Montain</div>
</a>
</div>
</div>

</body>

html css

Answer 1

Answer №1

attempt

img{
  width: 100%;
  height: auto;
}

this method should ensure your image stays within the boundaries of its container

Answer 2

attempt

img{
  width: 100%;
  height: auto;
}

this method should ensure your image stays within the boundaries of its container

Answer 3

Answer №2

Don't forget to add the correct ; at the end of your div.img img definition:

div.img img {
    width: 100%;
    height: auto;
}

.navigation {
padding-top: 70px;
padding-bottom: 70px;
position: relative;
text-transform: uppercase;

}

.container {


}

.brand-text {
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 40px;
font-weight: 700px;
color: black;
-webkit-transition: color 700ms ease;
text-align: center;

}

.brand-text:hover {
color: grey;

}
.nav-brand {
text-decoration:none;
}

.nav-menu {
text-align: center;
}

.nav-link {
padding-top: 7px;
padding-bottom: 7px;
margin-right: 20px;
margin-left: 20px;
text-decoration: none;
color: black;
font-family: Georgia, Times, 'Times New Roman', serif;
-webkit-transition: color 700ms ease;
position: relative;
}

.nav-link:hover {
color: grey;
}

/*Gallery*/

a {
text-decoration: none;

}

div.img {
margin: 5px;
float: left;
width: 180px;
-webkit-transition: opacity 400ms ease, box-shadow 400ms ease;
transition: opacity 400ms ease, box-shadow 400ms ease;
background-color: #fff;
}

div.img:hover {
background-color: transparent;
box-shadow: 0 0 50px -14px #000;
opacity: 0.8;

}

div.img img {
width: 100%;
height: auto;
}

div.desc {
text-align: center;
color: black;
padding: 15px;
}

* {
box-sizing: border-box;
}

@media only screen and (max-width: 700px){
.reponsive {
width: 49.999999%;
margin: 6px;
}
}

@media only screen and (max-width: 500px){
.responsive {
width: 100%
}

}

.clearfix:after {
content: "";
display: table;
}

<!DOCTYPE html>
<html>
<head>
<title>Josh Corbett</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="navigation">
<div class="container">
<a class="nav-brand" href="#"><h1 class="brand-text">Josh Corbett</h1></a>
<nav class="nav-menu" role="navigation">
<a class="nav-link" href="#">Portfolio</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">Blog</a>
</nav>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="#">
<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">
<div class="desc">Beautiful Montain</div>
</a>
</div>
</div>

</body>

Answer 4

Don't forget to add the correct ; at the end of your div.img img definition:

div.img img {
    width: 100%;
    height: auto;
}

.navigation {
padding-top: 70px;
padding-bottom: 70px;
position: relative;
text-transform: uppercase;

}

.container {


}

.brand-text {
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 40px;
font-weight: 700px;
color: black;
-webkit-transition: color 700ms ease;
text-align: center;

}

.brand-text:hover {
color: grey;

}
.nav-brand {
text-decoration:none;
}

.nav-menu {
text-align: center;
}

.nav-link {
padding-top: 7px;
padding-bottom: 7px;
margin-right: 20px;
margin-left: 20px;
text-decoration: none;
color: black;
font-family: Georgia, Times, 'Times New Roman', serif;
-webkit-transition: color 700ms ease;
position: relative;
}

.nav-link:hover {
color: grey;
}

/*Gallery*/

a {
text-decoration: none;

}

div.img {
margin: 5px;
float: left;
width: 180px;
-webkit-transition: opacity 400ms ease, box-shadow 400ms ease;
transition: opacity 400ms ease, box-shadow 400ms ease;
background-color: #fff;
}

div.img:hover {
background-color: transparent;
box-shadow: 0 0 50px -14px #000;
opacity: 0.8;

}

div.img img {
width: 100%;
height: auto;
}

div.desc {
text-align: center;
color: black;
padding: 15px;
}

* {
box-sizing: border-box;
}

@media only screen and (max-width: 700px){
.reponsive {
width: 49.999999%;
margin: 6px;
}
}

@media only screen and (max-width: 500px){
.responsive {
width: 100%
}

}

.clearfix:after {
content: "";
display: table;
}

<!DOCTYPE html>
<html>
<head>
<title>Josh Corbett</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="navigation">
<div class="container">
<a class="nav-brand" href="#"><h1 class="brand-text">Josh Corbett</h1></a>
<nav class="nav-menu" role="navigation">
<a class="nav-link" href="#">Portfolio</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">Blog</a>
</nav>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="#">
<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">
<div class="desc">Beautiful Montain</div>
</a>
</div>
</div>

</body>

Answer 5

Answer №3

you are explicitly defining the image width and height as "300" and "200"

Since you have already set the image width in your CSS, Update this:

<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">

To this

<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain">

(remove the width and height attributes)

Answer 6

you are explicitly defining the image width and height as "300" and "200"

Since you have already set the image width in your CSS, Update this:

<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">

To this

<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain">

(remove the width and height attributes)

Answer 7

Answer №4

You forgot to include a semi-colon at the end of the image width property.

div.img img {
    width: 100%;
    height: auto;
}

Answer 8

You forgot to include a semi-colon at the end of the image width property.

div.img img {
    width: 100%;
    height: auto;
}

Answer 9

Answer №5

If you're unsure if this is what you're searching for, consider adjusting the size properties of the picture elements to 100%.

Here's how you can make the change:

<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">

Change it to:

<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="100%" height="100%">

Answer 10

If you're unsure if this is what you're searching for, consider adjusting the size properties of the picture elements to 100%.

Here's how you can make the change:

<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="300" height="200">

Change it to:

<img src="http://wallpaperwarrior.com/wp-content/uploads/2016/09/Wallpaper-1-1024x640.png" alt="Mountain" width="100%" height="100%">

Struggling to contain the image inside my div element

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The column flex-direction property seems to be malfunctioning

Display additional content button, dynamic div identification

Using the onclick attribute as a unique identifier for a button

Encountering an issue where an error message indicates that a variable previously declared is now undefined

Ways to implement CSS styling to every input element excluding inputs located within list items of a specific class

Modify the base URL with JavaScript

Ways to toggle the visibility of an element based on the condition of two other elements

Using JQuery AJAX to transfer unstructured list elements to an ASP.net MVC controller action

What is the best way to position the top line next to the border?

CSS directives are not compatible with Internet Explorer 8

What could be causing my JavaScript source to fail to load in an HTML document?

Transforming DOM elements into Objects

Using Bootstrap classes within a specified class declaration

Learn how to apply formatting to all textboxes on an ASP.NET website using CSS without having to set the CSS class property for each individual textbox

Is there a way to adjust the padding temporarily?

Challenges with jQuery Image Sliders

How to Align <ul> to the Right in Bootstrap 4

Retrieve the total count of tables within a specific div element

A guide to customizing the appearance of Textfield labels in Material-UI using React

Tips for starting the debugging process with POST and GET requests in Django and the Python Shell