Border Not Resizing With Image - html

I'm trying to fit a border around a resized image but it takes the dimensions of the original. How do I place a perfect border around an image?
HTML:
<div id="show">
<h1>Featured Items</h1>
<div class="row">
<div class="col-md-4" align="center">
<img src="C:\Users\Gabriel\Downloads\1.png">
</div>
<div class="col-md-4" align="center">
<img src="C:\Users\Gabriel\Downloads\1.png">
</div>
<div class="col-md-4" align="center">
<img src="C:\Users\Gabriel\Downloads\1.png">
</div>
</div>
</div>
CSS:
#show img {
padding-top: 50px;
max-width: 50%;
max-height: 50%;
border: solid 1px #6E4E34;
}


Remove the padding-top and the border will be flush with the img
#show img {
max-width: 50%;
max-height: 50%;
border: solid 1px #6E4E34;
}
<div id="show">
<h1>Featured Items</h1>
<div class="row">
<div class="col-md-4" align="center">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
<div class="col-md-4" align="center">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
<div class="col-md-4" align="center">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
</div>
</div>

Related

How to create an HTML grid where cells grow to an exact width and extra height is hidden?

I am trying to style a page that shows a list of uploaded photos.
The requirements are (applied in this order in case of ambiguity):
The photos must be in a grid
There must be 3 columns
A photo that is too wide must shrink to the column width
A photo that is too narrow must grow to the column width
A photo that is shorter than it is wide is left as it is
A photo that is taller than it is wide is truncated (overflow hidden)
I can do all of the above except for the last one.
I tried the trick with padding-top: 100% but all that seemed to do was make everything twice as tall.
So how can I hide the overflow on a cell with defined width and aspect ratio?
.container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.box {
margin: 1rem;
width: calc((100% - 1rem * 6) / 3);
}
.box img {
width: 100%;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
<div class="container">
<div class="box green">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="box green">
<img src="https://dummyimage.com/100x100/000/fff">
</div>
<div class="box green">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="box green">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="box green">
<img src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="box green">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="box red">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="box red">
<img src="https://dummyimage.com/200x300/000/fff">
</div>
<div class="box red">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>

Woops ok so I tried the padding-top: 100% top trick again and this time it worked.
You cannot apply it to the children of the flex container (i.e. the .box) directly, you must have another box inside it like this:
.container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.box {
margin: 1rem;
width: calc((100% - 1rem * 6) / 3);
}
.box img {
width: 100%;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.aspect-ratio-box {
height: 0;
overflow: hidden;
padding-top: 100%;
position: relative;
}
.aspect-ratio-box-inside {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="container">
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/100x100/000/fff">
</div>
</div>
</div>
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/300x200/000/fff">
</div>
</div>
</div>
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
<div class="box red">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
<div class="box red">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x300/000/fff">
</div>
</div>
</div>
<div class="box red">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
</div>
It also fixed that weird extra bit that was showing at the bottom.

Center images in a <section>

I have a <section> tag in which there are 3 images. How can I center them for fullscreens?
The size of my screen is 22.9 ".
here is the code:
<section class="gallery">
<div class="container-fluid">
<div class="row">
<div class="fw mix-container home-gallery">
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-002.jpg""/>
</div>
</div>
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-003.jpg""/>
</div>
</div>
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-004.jpg""/>
</div>
</div>
</div>
</div>
</div>
Thank you for your answers
Best regards.

I have included a code snippet below that will run.
Essentially you make the images inline-block so they sit next to each other.
Then you can set the images parent container to be left 50%, and offset it with transform:translate();
You can change the width of the images as needed but the same logic should still apply.
.mix {
width: 200px;
height: 100px;
border: black solid 1px;
display: inline-block;
}
.mix-container {
position: relative;
display: inline-block;
left: 50%;
transform: translate(-50%, 0);
}
<section class="gallery">
<div class="container-fluid">
<div class="row">
<div class="fw mix-container home-gallery">
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-002.jpg"/>
</div>
</div>
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-003.jpg"/>
</div>
</div>
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-004.jpg"/>
</div>
</div>
</div>
</div>
</div>
</section>

Box shadow not working properly

Although I have ask the same question two times but I'm not getting any proper solution for this.I dont know what is wrong with my code. so here I'm posting the whole code (I know its against the community standard but seriously I want a solution for my problem and I request you guys to have a look at this and please keep patience) I'm new to web development field, please help me.
My problem is that I need to apply box shadow to #main-content-area to its top side and as well as left and right side (50% from top side)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#top-bar{
background-color:black;
color:white;
}
#txt-bar{
height:40px;
background-color:pink;
position:relative;
z-index:4;
}
#link-bar{
background-color:red;
height:40px;
z-index:4;
}
#image{
position:relative;
z-index:3;
}
.wrapper{
position:relative;
height: 100%;
width:100%;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
}
.halfshadow{
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 1000px 0px 10px rgba(0, 0, 0, 0.5);
}
#footer{
background-color:green;
position:relative;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" id="top-bar">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4" >
<h4> Some links </h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
</div>
<div class="col-sm-4" id="link-bar">
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="header.png" class="img-responsive"/>
</div>
</div>
<div class="wrapper">
<div class="line"></div>
<div class="row" >
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<div class="col-sm-12" style="background-color:green">
<h3>Welcome </h3>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
</div>
<div class="halfshadow"></div>
<div class="col-sm-2" >
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<div class="col-sm-6">
<h4>some text........</h4>
</div>
<div class="col-sm-6">
< h4>some link </h4>
</div>
</div>
</div>
</div>
</body>
</html>

It won't show. Because box shadow to the div element was empty. I just add some text and margin-top
#top-bar{
background-color:black;
color:white;
}
#txt-bar{
height:40px;
background-color:pink;
position:relative;
z-index:4;
}
#link-bar{
background-color:red;
height:40px;
z-index:4;
}
#image{
position:relative;
z-index:3;
}
.wrapper{
position:relative;
height: 100%;
width:100%;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
}
.halfshadow{
margin-top:20px;
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 10px 0px 10px rgba(150, 0, 0, 0.5);
}
#footer{
background-color:green;
position:relative;
}
<div class="container-fluid">
<div class="row" id="top-bar">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4" >
<h4> Some links </h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
</div>
<div class="col-sm-4" id="link-bar">
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="header.png" class="img-responsive"/>
</div>
</div>
<div class="wrapper">
<div class="line"></div>
<div class="row" >
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<div class="col-sm-12" style="background-color:green">
<h3>Welcome </h3>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
</div>
<div class="halfshadow">Shadow content</div>
<div class="col-sm-2" >
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<div class="col-sm-6">
<h4>some text........</h4>
</div>
<div class="col-sm-6">
< h4>some link </h4>
</div>
</div>
</div>
</div>

#main-content-area{
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}
or you can go for it also
#main-content-area
{
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 15px 1px 5px #888888;
}

Explain box shadow for every thing here in my example the values are:
Horizontal Length:1px
Vertical Length:4px
Blur Radius:16px
Spread Radius:15px
The CSS:
box-shadow: 1px 4px 16px 15px rgba(82,43,136,1);

If you want to apply the box-shadow property to your #main-content-area div, you have to basically... add this property into #main-content-area div in your css file.
It will apply the shadow effect on left, right and bottom side:
box-shadow: 0 10px 10px 10px rgba(0, 0, 230, 0.5);
If you want the shadow to appear only on bottom and right side, use:
box-shadow: 10px 10px 10px rgba(0, 0, 230, 0.5);
Codepen: http://codepen.io/anon/pen/VmoNWJ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#top-bar{
background-color:black;
color:white;
}
#txt-bar{
height:40px;
background-color:pink;
position:relative;
z-index:4;
}
#link-bar{
background-color:red;
height:40px;
z-index:4;
}
#image{
position:relative;
z-index:3;
}
.wrapper{
position:relative;
height: 100%;
width:100%;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
box-shadow : -10px 0px 10px 0px rgba(0,0,0,0.5),10px 0px 10px 0px rgba(0,0,0,0.5),0px -10px 10px 0px rgba(0,0,0,0.5);
}
.halfshadow{
z-index:-1;
top: 0;
width: 100%;
height: 50%;
box-shadow: 1000px 0px 10px rgba(0, 0, 0, 0.5);
}
#footer{
background-color:green;
position:relative;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" id="top-bar">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4" >
<h4> Some links </h4>
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4" id="txt-bar"><h1 >Greetings</h1>
</div>
<div class="col-sm-4" id="link-bar">
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="header.png" class="img-responsive"/>
</div>
</div>
<div class="wrapper">
<div class="line"></div>
<div class="row" >
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<div class="col-sm-12" style="background-color:green">
<h3>Welcome </h3>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
</div>
<div class="halfshadow"></div>
<div class="col-sm-2" >
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<div class="col-sm-6">
<h4>some text........</h4>
</div>
<div class="col-sm-6">
< h4>some link </h4>
</div>
</div>
</div>
</div>
</body>
</html>

bootstrap grid: position not symmetric

So i'm building this portfolio type website and i just can't get the bootstrap grid to work properly. As you can see in the image, the second big row, which starts with the big image is not symmetric to the first row. I don't really understand where the problem is. I've managed to do that without bootstrap using fixed width and height, but that really is not an option as i would loose all the responsiveness. What am i doing wrong here?
<section class="container-fluid" style="max-width: 1980px; min-width:1280px;">
<div class="row">
<div class="col-md-7" style="padding-right: 0">
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
</div>
<div class="col-md-5" style="padding-left: 0">
<div class="col-md-12" style="padding: 5px;">
<img src="http://placehold.it/780x415" class="img-responsive">
</div>
</div>
</div>
<div class="row">
<div class="col-md-5" style="padding-right: 0">
<div class="col-md-12" style="padding: 5px;">
<img src="http://placehold.it/780x415" class="img-responsive">
</div>
</div>
<div class="col-md-7" style="padding-left: 0">
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
<div class="col-md-4" style="padding: 5px;">
<img src="http://placehold.it/350x200" class="img-responsive">
</div>
</div>
</div>
</section>
UPDATE:
So I actually managed to solve my problem, by creating two new column classes - col--small-blocks and col--large-blocks
.col-xs-small-blocks,
.col-sm-small-blocks,
.col-md-small-blocks,
.col-lg-small-blocks {
position: relative;
min-height: 1px;
padding: 0;
}
.col-xs-small-blocks {
width: 60%;
float: left;
}
#media (min-width: 768px) {
.col-sm-small-blocks {
width: 60%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-small-blocks {
width: 60%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-small-blocks {
width: 60%;
float: left;
}
}
.col-xs-large-blocks,
.col-sm-large-blocks,
.col-md-large-blocks,
.col-lg-large-blocks {
position: relative;
min-height: 1px;
padding: 0;
}
.col-xs-large-blocks {
width: 40%;
float: left;
}
#media (min-width: 768px) {
.col-sm-large-blocks {
width: 40%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-large-blocks {
width: 40%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-large-blocks {
width: 40%;
float: left;
}
}
This solved the problem, that bootstrap originally doesn't have classes for 5 column grid, so as you can see I created a column for my small images which takes up 60% of space and a column for my large blocks which takes up 40% of space. After that I just used col-md-4 to create the small blocks and col-md-12 for the large blocks
<section class="container-fluid" style="max-width: 1980px; min-width:1280px;">
<div class="row">
<div class="col-md-small-blocks">
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
</div>
<div class="col-md-large-blocks">
<div class="col-md-12 block-padding">
<img src="http://placehold.it/750x405" class="img-responsive">
</div>
</div>
</div>
<div class="row">
<div class="col-md-large-blocks">
<div class="col-md-12 block-padding">
<img src="http://placehold.it/750x405" class="img-responsive">
</div>
</div>
<div class="col-md-small-blocks">
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
<div class="col-md-4 block-padding">
<img src="http://placehold.it/375x200" class="img-responsive">
</div>
</div>
</div>
</section>
And now as you can see, everything is symmetric and responsive :)

Bootsrap vertical bottom inside a div

How can I place the img to the bottom of the div?
<body>
<div class="container">
<div class="row" style="background-color: yellow; height: 600px;">
<div class="col-md-6">
<img src="img.png" alt="alt">
</div>
<div class="col-md-6">
Lorem ipsum
</div>
</div>
</div>
</body>
Thanks

The solution is:
HTML:
<div class="col-md-6 myclass">
<img src="img.png" class="bottom" width="300">
</div>
CSS:
.bottom{
position:absolute;
bottom:0;
}
.myclass{
height: 100%;
position:relative;
}