.d1 {
background-color: red;
text-align: center;
}
<div class="d1">
<img src="http://www.aliceseelywholesale.net/wp-content/uploads/ADB101-DAISY-CUTOUT-NARROW-LINK-BRACELET-300x100.jpg">
</div>
I use the above simple code to display an image in the middle a div. Code works good however when I resize the window below the width of the image, the border/div doesn't cover the image... Is there a way to fix this? Ty
.d1 {
background-color: red;
}
.img{
display: block;
width: 100%;
margin: 0px auto;
}
Treat the Image as a block content not as inline-element.
I hope this helps.
If you want to use a backgound image for your <div> I suggest you set the image as a background-image for your div, and remove your <img> element.
This will save you from using an addition element and also fix your problem:
.d1 {
width:300px;
height:100px;
background-color: red;
text-align: center;
background-image: url(http://www.aliceseelywholesale.net/wp-content/uploads/ADB101-DAISY-CUTOUT-NARROW-LINK-BRACELET-300x100.jpg);
background-size:cover;
}
<div class="d1">
</div>
Related
I put three photos inside a container but since I want there to be space between them, I couldn't leave the original size because they would take up the whole container without leaving the space I want.
To make them smaller I modified the height to 80%.
It worked but since I need to add the shadow to the box, I need it to match the edges of the image.
As you can see from the purple, the box is larger than the actual image. I would like to know how to get a box as big as the actual image, so without the purple section.
I added the background color only to the first pic, but the problem can be extended for all the three pics.
I post the code below.
.background {
height: 100vh;
display: flex;
justify-content: space-between;
}
.background * {
width: 100%;
height: 80%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
<div class="background">
<div class="firstphoto"></div>
<div class="secondphoto"></div>
<div class="thirdphoto"></div>
</div>
Thanks all! ;)
You can take a look at object-fit property: https://www.w3schools.com/css/css3_object-fit.asp
Also, you should put:
.background > * {
flex: 1/3;
}
So that the boxes are taking the same space.
you should add this to each div that contains an image (if they have the same class)
The div would then be positoinned relatively to the image and you could then edit the box-shadow with the box-shadow property
.col{
position:relative;
top:0px;
left:0px;
width:100%;
height:100%;
margin-right:3.33%;
box-shadow: 10px 10px 10px 10px red;
}
Not sure why you're having the images as background images, but I would just use object-fit. Do note, I replaced the divs with image tags.
.background {
height: 100vh;
display: flex;
justify-content: space-between;
}
.background img {
width: 100%;
height: 80%;
padding: 1rem;
box-sizing: border-box;
object-fit: contain;
}
<div class="background">
<img src="https://picsum.photos/200/300" alt="200x300" title="200x300"/>
<img src="https://picsum.photos/50/150" alt="50x150" title="50x150"/>
<img src="https://picsum.photos/30/150" alt="30x150" title="30x150"/>
</div>
I'm searching ways to force an image element to stay always aligned at the middle of a div even when the div element gets too small to properly center the image. Here's an explanation of what I want to do: Question.jpg
I need the solution to be purely CSS if possible?
Using this centering trick should give you what you want:
img {
position:relative; (or absolute, it depends on your needs)
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
This keeps the image centered no matter the size of the container it is in. It doesn't resize the image though. Based on that pic you out it seems like you didn't want that.
Use the following grid layout and styles:
style{
.container{ max-width:800px; margin:0 auto;}
}
#media
only screen and (max-width:600px) {
.mCenter{margin:0 auto;}
.mImage600:{width:100%; height:auto;}
}
<div class=container>
<div class=mCenter>
<img class=mImage600 src 'img.jpg' width=600 >
</div>
<div>
Fiddle
img{
margin: 0 auto;
}
could help
You can do like this, using display flex.
div {
width: 100%;
height: 500px;
border: 1px solid gray;
display: flex;
align-items: flex-start;
text-align: center;
}
img {
align-self: center;
margin: 0 auto;
}
<div>
<img src="http://screenshots.en.sftcdn.net/en/scrn/323000/323026/angry-birds-theme-02-100x100.png" alt="">
</div>
I have an image inside a DIV. I want the image to shrink if the size of the div goes below the size of the image. Bu I also want the image to be centered in the DIV.
This is my HTML:
<div id="logo">
<img src="/images/logo_2016.jpg">
</div>
This is my CSS
#logo img {
max-width:800px;
width: 100%;
}
This works to resize the image exactly like I want but the image is not centered in the DIV. If I try to center the image with:
#logo img {
margin:auto;
max-width:800px;
width: 100%;
}
Then it is centered but no longer resizes with the div.
How can I get it to do both? Thanks.
You forgot to add display: block;.
#logo img {
margin:auto;
max-width:800px;
width: 100%;
display: block; /* new */
}
You can add display:block; to the image element. You can also set the text-align:center for the #logo element which is kind of a hack to it.
JSFiddle: https://jsfiddle.net/
Try setting #logo to a max-width also and place a text-align: center on the image, with you can style as an inline-block. See this fiddle:
https://jsfiddle.net/7ewcbr95/
#logo {
max-width: 1000px;
height: auto;
text-align: center;
background: #333;
}
#logo img {
max-width:800px;
display: inline-block;
}
<div id="logo">
<img src="http://placehold.it/350x150">
</div>
Creating a gallery of divs with links images and text. problem is- can't get the inner wrapper to center everything. margin:0 auto; isnt working because i havent set a width for it. but i want the width to change with different browser sizes but that the inner .prjctwrap divs will be centered within it. here's my markup:
HTML :
<div id="wrapper">
<div id="innerprjctwrap">
<div class="prjctwrap">
<a href="http://www.google.com">
<div class="imageCont" style="background-image:url(image1.jpg);">
</div>
<div class="text">Text Text Text</div> </a> </div>
...this reapeats from prjctwrap with other images, text and links
</div></div>
CSS:
#wrapper {
background-color: #FFFFFF;
width:100%;
height:1000px; }
.prjctwrap {
display:inline-block;
width: 130px;
height:180px;
overflow:hidden;
margin:15px; }
.prjctwrap .imageCont{
width: 130px;
height: 100px;
background-size: cover; }
.prjctwrap .text {
text-align: center;
color: black;
text-decoration: none;
height:80px; }
.prjctwrap a {
text-decoration:none; }
#innerprjctwrap {
margin:0px auto; }
You haven't set any size on the #innerprjctwrap element, so it will have the default setting width: auto;. That means that it will use the full width available, so you can't see that it's actually centered.
Set a width on the element, and you will see that it is centered:
#innerprjctwrap {
width: 130px;
margin: 0 auto;
}
If you want to use text alignment to center the content inside the element, you shouldn't use margins to center the element, you should use text-align to center what's inside it:
#innerprjctwrap {
text-align: center;
}
Add a width for #innerprjctwrap other ways margin:0 auto; not detected
Eg:
#innerprjctwrap {
margin:0px auto;
width:200px;
}
Using JsFiddle for explaining such problems will be much clear.
Is this fiddle what you want?
If so, then you want is actually to center elements inside #innerprjctwrap like #Guffa says, simply add:
#innerprjctwrap{
text-align:center;
}
add width. if no progress, try removing 'px'. if there's still no progress, use padding in the wrapper div.
I have an image of 400px and a div that is smaller (the width is not always 300px as in my example). I want to center the image in the div, and if there is an overflow, hide it.
Note: I must keep the position:absolute on the image. I'm working with css-transitions, and if I use position:relative, my image shakes a bit (https://web.archive.org/web/20120528225923/http://ta6.maxplus.be:8888/).
jsfiddle
http://jsfiddle.net/wjw83/1/
You should make the container relative and give it a height as well and you're done.
http://jsfiddle.net/jaap/wjw83/4/
.main {
width: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 200px;
}
img.absolute {
left: 50%;
margin-left: -200px;
position: absolute;
}
<div class="main">
<img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
If you want to you can also center the image vertically by adding a negative margin and top position: http://jsfiddle.net/jaap/wjw83/5/
None of the above solutions were working out well for me. I needed a dynamic image size to fit in a circular parent container with overflow:hidden
.circle-container {
width:100px;
height:100px;
text-align:center;
border-radius:50%;
overflow:hidden;
}
.circle-img img {
min-width:100px;
max-width:none;
height:100px;
margin:0 -100%;
}
Working example here:
http://codepen.io/simgooder/pen/yNmXer
Most recent solution:
HTML
<div class="parent">
<img src="image.jpg" height="600" width="600"/>
</div>
CSS
.parent {
width: 200px;
height: 200px;
overflow: hidden;
/* Magic */
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
}
Found this nice solution by MELISSA PENTA (https://www.localwisdom.com/)
HTML
<div class="wrapper">
<img src="image.jpg" />
</div>
CSS
div.wrapper {
height:200px;
line-height:200px;
overflow:hidden;
text-align:center;
width:200px;
}
div.wrapper img {
margin:-100%;
}
Center any size image in div
Used with rounded wrapper and different sized images.
CSS
.item-image {
border: 5px solid #ccc;
border-radius: 100%;
margin: 0 auto;
height: 200px;
width: 200px;
overflow: hidden;
text-align: center;
}
.item-image img {
height: 200px;
margin: -100%;
max-width: none;
width: auto;
}
Working example here codepen
For me flex-box worked perfect to center the image.
this is my html-code:
<div class="img-wrapper">
<img src="..." >
</div>
and this i used for css:
I wanted the Image same wide as the wrapper-element, but if the height is greater than the height of the wrapper-element it should be "cropped"/not displayed.
.img-wrapper{
width: 100%;
height: 50%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
height: auto;
width: 100%;
}
working solution with flex-box for posterity:
main points:
overflow hidden for wrapper
image height and width must be specified, cannot be percentage.
use any method you want to center the image.
wrapper {
width: 80;
height: 80;
overflow: hidden;
align-items: center;
justify-content: center;
}
image {
width: min-content;
height: min-content;
}
<html>
<head>
<style type="text/css">
.div-main{
height:200px;
width:200px;
overflow: hidden;
background:url(img.jpg) no-repeat center center
}
</style>
</head>
<body>
<div class="div-main">
</div>
</body>
just make sure how you are using image through css background use backgroud image position like background: url(your image path) no-repeat center center; automatically it wil align center to the screen.
this seems to work on our site, using your ideas and a little math based upon the left edge of wrapper div. It seems redundant to go left 50% then take out 50% extra margin, but it seems to work.
div.ImgWrapper {
width: 160px;
height: 160px
overflow: hidden;
text-align: center;
}
img.CropCenter {
left: 50%;
margin-left: -100%;
position: relative;
width: auto !important;
height: 160px !important;
}
<div class="ImgWrapper">
<img class="CropCenter" src="img.png">
</div>
I have been trying to implement Jaap's answer inside this page of my recent site, with one difference : the .main {height:} was set to auto instead of a fixed px value.
As responsive developer i am looking for a solution to synchronize the image height with the left floating text element, yet only in case my text height becomes greater then my actual image height.
In that case the image should not be rescaled, but cropped and centered as decribed in the original question here above.
Can this be done ?
You can simulate the behaviour by slowly downsizing the browser's width.
This issue is a huge pain in the a.. but I finally got it.
I've seen a lot of complicated solutions. This is so simple now that I see it.
.parent {
width:70px;
height:70px;
}
.child {
height:100%;
width:10000px; /* Or some other impossibly large number */
margin-left: -4965px; /* -1*((child width-parent width)/2) */
}
.child img {
display:block; /* won't work without this */
height:100%;
margin:0 auto;
}
you the have to corp your image from sides to hide it try this
3 Easy and Fast CSS Techniques for Faux Image Cropping | Css ...
one of the demo for the first way on the site above
try demo
i will do some reading on it too