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>
Related
.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>
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 am trying to make my site logo/banner fit the content box correctly.
Unfortunately, it is appearing at different widths on different computer resolutions and window sizes.
This is also happening with my banner ad within the content box.
CSS
#logo {
max-width: 100%;
height: auto;
width: auto;
}
HTML
<div id="logo">
<center>
<img src="logo.png" alt="Image of Traffic Monsoon">
</center>
</div>
The website is here.
To center an inline level element like <img> tag, you can set text-align:center; on the container, with your example:
#logo {
text-align: center;
}
<div id="logo">
<img src="logo.png" alt="Image of Traffic Monsoon">
</div>
In addition, remove <center>, it has been deprecated. And add following lines to make the image to shrink to fit automatically when its intrinsic width is larger than the container:
#logo img {
max-width: 100%;
height: auto;
}
<center>is deprecated so don't use it.
To fix your issue you need to target the img not the div
use margin:auto and display:block to center the image instead of the deprecated center
#logo img {
max-width: 100%;
height: auto;
width: auto;
margin:auto;
display:block
}
<div id="logo">
<a>
<img src="http://clubtrafficmonsoon.com/banner.gif" alt="Image of Traffic Monsoon">
</a>
</div>
If you want to apply this generally to all images in the site, just do this:
img {
max-width: 100%;
height: auto;
width: auto;
}
Wrap your whole page in a <main> element, or a wrapper class. Set your max-width on that element, and all subsequent elements can have width:100% set.
Please try this:
First of all wrap you entire page with a div named wrapper.
<div class="wrapper">your code here</div>
Then apply this css below:
.wrapper {
margin: 0 auto;
width: 1574px;
}
#logo {
margin: 0 auto;
text-align: center;
width: 1331px;
}
#logo img{
text-align: center;
width: 96%;
}
#content {
background-color: #ACAE4C;
float: right;
display: inline-block;
padding: 0;
}
<div id="content">
<div class="pic"></div>
<div class="desc"></div>
</div>
I want to fit image to class(pic) div, and make all my id=content responsive.
You can use css something like this:
img{width:100%;
height:100%;}
Maybe this can help you here is working example.
For responsive images you can use the following CSS...
img {
display: block;
height: auto;
width: 100%;
}
This will then take up the full width of the parent container.
I hope this helps.
img {
width: 100%;
height: auto;}
Or if you want it to Automaticly be sized:
img {width:auto;height:auto;}
Or screen sized
img {width:100%;height:100%;}
Or
img{background-size: cover;}
Hope this will help you today!
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.