Menu icon Foundation

My Posts

No Content

My Comments

John Jameson commented on Kevin Neal's post over 2 years

easy way (ideally in an appropriate breakpoint; image will overflow the container and the overflow will disappear):
.the-container-column {overflow:hidden;}
.the-container-column img {width:1000px; max-width:1000px; margin-right:0; margin-left:auto;}
//edited; i think this will work -- set the image size manually and try to pin it to the right or left side. if it can leave the flow of the page this is easier to do with absolute positioning....
hard way (image will center horizontally and vertically within its container:
.my-great-container-for-just-the-image {
position:relative;
// stuff to specify height and width here, perhaps in vw units or something
overflow: hidden;
}
.my-great-container-for-just-the-image img {
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
margin: auto;
width:100%; // or maybe 150% or something
}
 
 

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Kevin Neal's post over 2 years

easy way (ideally in an appropriate breakpoint; image will overflow the container and the overflow will disappear):
.the-container-column {overflow:hidden;}
.the-container-column img {width:1000px; max-width:1000px; margin-right:0; margin-left:auto;}
//edited; i think this will work -- set the image size manually and try to pin it to the right or left side. if it can leave the flow of the page this is easier to do with absolute positioning....
hard way (image will center horizontally and vertically within its container:
.my-great-container-for-just-the-image {
position:relative;
// stuff to specify height and width here, perhaps in vw units or something
overflow: hidden;
}
.my-great-container-for-just-the-image img {
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
margin: auto;
width:100%; // or maybe 150% or something
}
 
 

Posts Followed

Following

  • No Content

Followers

  • No Content