I'm currently stuck, as I'm trying to center an image in the page. Here is what I have
HTML
<div class="bg-container">
<img alt="Background" class="random bgimg">
</div>
CSS
.bgimg{
max-height: 640px;
width: 1920px;
clip: auto;
}
.bg-container{
overflow-x: hidden;
}
Note: There is no src attribute in the img tag as I use the random class to pull a random image via JavaScript.
I've tried applying center-block and text-center to both the div and image classes to no avail. Here is an example of the actual page. http://shepherdjerred.com/demo/front/
I appreciate any help given.
You do not add px unit in width attribute of an image element.
To center the image,add this to your selector
.bgimg {
display: block;
margin: auto;
}
Related
I have some very simple html a div with an image inside. Strangely the image extends beyond the bottom of the div and I cannot understand why.
<div>
<img src="picture.jpg">
</div>
When I check the element properties the div has a height of 195px and the image has a height of 200px.
This has me stuck. What could be causing this and how do I fix it?
Edit1
Looking through the properties I found:
img {
margin-bottom: -5px
}
This is set by w3.css:
.w3-image{max-width:100%;height:auto}img{margin-bottom:-5px}a{color:inherit}
I am not sure why this is being applied as I have no class set for this image or the containing div.
I have now fixed this with:
img {
margin-bottom: 0px !important;
}
edit2
Ok, found it. the clas was being applied elsewhere. Removed it now and all good.
you coud give an ID to the image and add it to the css file whit a widthof 100%
<div src="img.jpg" id="id_example"></div>
***///CSS
#id_example {
width: 100%;
}
or you can try in pixels
It's easy.
For this HTML code:
<div>
<img src="picture.jpg">
</div>
Add this CSS code:
div img {
display: block;
width: auto;
height: 100%;
}
I'm trying to display an oversized image to fix inside a bootstrap row with the size col of 12. But whenever I do this, the image makes the row stretch all the way across and outside of the screen. I want keep the row width the same, but have it overflow with a scroll if the image gets too big inside the div. How should I do this? Below is the code that I've got.
HTML
<div id="imageRow" class="row">
<div class="col-md-12">
<div id='imgContainer' runat="server" class='imgContainer' visible="false">
<asp:Image runat='server' ID='imgDocument' Visible="false" CssClass='imgDocument clear'/>
</div>
</div>
</div>
CSS
.imgContainer {
position: relative;
overflow: scroll;
width: 100%;
height: 600px;
}
P.S. I tried using Max-width, but it doesn't work as this will just simply limits the width of my image to fix inside the div without a scrollbar for it. I.e. it won't allow it to go oversize
I think this example CodePen link has a solution: https://codepen.io/greatzspido/pen/jGKwNw
Do some checks also in your code:
If img tags have max-width:100% do a reset.
Add an element with the container class to wrap your content.
Change your CSS code as below.
.imgContainer {
position: relative;
overflow-x: auto;
width: 100%;
max-width: 100%;
}
I've found a newer solution. Add this to the image:
.image {
object-fit: fill;
}
I want create a responsive image in my doc.
<style>
img,.img {
width: 80%;
height: auto;
}
</style>
<body>
<div>
<img src="img/tools3/2.png" />
</div>
<body>
Now I try convert img to div:
<body>
<div>
<div class="img" style="img/tools3/2.png"></div>
</div>
<body>
But not showing any images!
If I change height: auto; to height: 100px; it works but it's not responsive else...
Also I add:
box-sizing: border-box;
clear: both;
to .img but not working.
You don't need the pic in the div, you can have that in the img tag.
The img tag can be changed on hover using css
.img:hover {
content:url(NEWPICPATH);
}
See this answer for more details on changing src this way.
To do responsive images you need to set the max-width property to 100%. Images always have to be an img tag unless you decide to use background-image on a div.
What you have to do is this ....
In html ....
<div style="width:50%;height:50%">
<img style="width:100%; height:100%;" src="http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/california-beautiful-natyre-hd-wallpapers-widescreen-cool-images.jpg" />
</div>
you can give any height or width for the div.If you want you can use style in external style sheet.
I suggest you to try bootstrap.it is pretty easy.
looking at the below
<div>
<div class="img" style="img/tools3/2.png"></div>
</div>
The image will not show because
you have
style as "img/tools3/2.png"
A div is a container that can hold an image it, it does not have a source property like an image tag that points to a link.
If you want to make the image display like a div you can simply do
img{
display:block
}
However you can also set a div background to te an image like this
div {
width:put your width here;
height: put yout height here;
background-image:url("url here");
background-size: cover;
}
here is a
div {
width:500px;
height:500px;
background-image:url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTcKiWvJ9_lKvgooA-T8VMt9BBVpex3VI-NVUkNrGhiECN3YkRdqQ");
background-size: cover;;
<div>
</div>
I load images dynamically into my webpage and make them responsive:
<div id="images"><img id="dynamic_img" src=""/></div>
css:
#images{
height: 80%;
width: 30%
}
img{
max-height: auto
max-width:100%
}
Problem now is, that the images have different heights and widths. Now this works when the width of an image is longer than its height but not the other way around. (in this case max-height would be 100% and max-width: auto
Is this possible to switch these two values according to the image loaded in CSS or do I need to use JS for that?
Thanks in advance
Here you have an example where images are fitted horizontal and vertically.
I used
img {
max-width: 100%;
max-height: 100%;
}
Here you are: https://jsfiddle.net/jormaechea/j219ucnc/1/
Update
The key to achieve this is to set
html, body {
height: 100%;
}
<div id="images"><img class="img" src="" alt="" /></div>
.img
{
width=100%;
}
your div should have width=100% for example.
don't use max-width
you can set the #images div also a with of 80% - it will be responsive and the image refits to the divs width
On my website I would like to display images uploaded by user in a new window with a specific size (width: 600px). The problem is that the images may be big. So if they are bigger than these 600px, I would like to resize them, preserving the aspect ratio.
I tried the max-width CSS property, but it doesn't work: the image's size doesn't change.
Is there any way to solve this problem?
HTML:
<div id="ImageContainerr">
<img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>
CSS:
img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }
I also tried setting the max-width: 600px for an image, but doesn't work. The image is streamed from a servlet (it's stored outside Tomcat's webapps folder).
You can write like this:
img{
width:100%;
max-width:600px;
}
Check this http://jsfiddle.net/ErNeT/
I see this hasn't been answered as final.
I see you have max-width as 100% and width as 600. Flip those.
A simple way also is:
<img src="image.png" style="max-width:600px;width:100%">
I use this often, and then you can control individual images as well, and not have it on all img tags. You could CSS it also like below.
.image600{
width:100%;
max-width:600px;
}
<img src="image.png" class="image600">
The problem is that img tag is inline element and you can't restrict width of inline element.
So to restrict img tag width first you need to convert it into a inline-block element
img.Image{
display: inline-block;
}
Given your container width 600px.
If you want only bigger images than that to fit inside, add:
CSS:
#ImageContainer img {
max-width: 600px;
}
If you want ALL images to take the avaiable (600px) space:
#ImageContainer img {
width: 600px;
}
Try this
div#ImageContainer { width: 600px; }
#ImageContainer img{ max-width: 600px}
Your css is almost correct. You are just missing display: block; in image css.
Also one typo in your id. It should be <div id="ImageContainer">
img.Image { max-width: 100%; display: block; }
div#ImageContainer { width: 600px; }
<div id="ImageContainer">
<img src="http://placehold.it/1000x600" class="Image">
</div>
Wrap the element in a div with the fixed width/height:
<div style="width: 600px;">
<img src="whatever" />
</div>