I have div with width style 65%.
Then I put an img inside this div without any css style attributes, but this img width above 65% and move out side the div frame.
How can I adjust the img width without give it any css style?
<div style="width: 65%">
<img src="assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg">
</div>
Try this.
img{
width:100%;
height: auto;
}
Set as a background image
<div class="product-image" style="width: 65%; background-image:url(assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg');"></div>
Not sure what you want to do, could you clarify?
In any case, you can, and you can't, depending on how you look at it. Most images are pixel 'grids' and will have a set size in pixels, no matter what you do.
You can set the size in HTML:
<img src="assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg" height="42" width="42">
But this will not actually resize the image, just push it together or stretch it, so your quality will suffer. (Same with CSS) And these days this is seen as a bad way of doing this.
If you cannot target the image directly, maybe targeting the image as a child of its container works for you?
div img {
width: 100px;
height 100px;
}
But really, you should explain more what you want to do and why your limitations are what they are.
Use !important inside your div tag style.
CSS rules marked !important take precedence over later rules. Normally in CSS the rules work from top to bottom, so if you assigned a new style to an element further down the style sheet or in a secondary style sheet then the later rule would take precedence. !important ensures that this rule has precedence.
For example in your case:
<div style="width: 65% !important">
<img src="assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg">
</div>
The first rule now has precedence so the later rule is ignored and the img style will take after it's div.
Let me know if this helps.
your image is bigger then your div because the css does not apply to the image,
try using
html
<div class="image">
<img src="assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg">
</div>
css
.image{
width: 65%;
}
.image img{
width: 100%;
}
this will make a div width the width of 65% of the page and the image will be 100% of the div width.
Related
I have the following html structure:
<div class="parent">
<img src="image.png" class="child"/>
</div>
<div class="container">Page goes here.</div>
And the following css:
.container, .parent{
position: relative;
}
.child{
display: block;
max-width: 100%;
height: auto;
position: fixed;
}
Because the image is fixed the parent's height is probably 0. Therefore the container is placed over the image. However I want to have the image fixed and the container to be placed after the image, while keeping it responsive.
Any help would be appreciated!
UPDATE: I'm trying to get the scrolling behavior shown in this JSFiddle, but to make the container always be at the bottom of the image, even if the screen width is (let's say) under 300px.
In your Fiddle, I was able to achieve the desired behavior by changing the .container property from
margin-top: 300px to margin-top:50%
You'll likely not see a change if you add a position class to the image. That's used on div tags. Try adding that class to a new div tag with which you surround your image.
Alternatively, you could add a display: block to your image, but that makes things more complicated.
I think this is what you're asking, but I'm still a bit confused.
I have a simple span on my page with a class eah-logo-img, and inside of my CSS, I have tried to set the background image for it. However, It is not working for some reason.
This is my HTML:
<span class="eah-logo-img"></span>
and this is my CSS:
.eah-logo-img{
width: 150px;
height: 150px;
vertical-align: middle;
background: url('img/logo_def_white.gif');
background-size: auto;
}
My image is inside of the img folder (inside the same folder as the CSS; so it should be working.).
I have made sure the name is right, and I have checked Chrome inspect element and made sure the link is correct.
I am unsure why this isn't working.
Cheers.
Your span element has no actual width or height – and therefor you do see little of any background, because it is displayed in an area that is 0*0 pixels big.
width and height by definition have no effect on inline elements (which span is by default.)
So add display:inline-block or display:block to your span, or float it, or position it absolutely – so that width and height are allowed to have an effect.
In your css add
display:block
or
display:inline-block
better yet do not use span if you want to define the width and height, use div instead.
Anyone who has used twitter bootstrap knows that an image can be made responsive using the img-responsive class in the html img tag. However, these images take up 100% of the width of the division.
How can I make the image responsive while still keeping its original width?
You can put the image in a wrapper and give the wrapper the width you want the image to have.
HTML
<div class="imgwrapper">
<img src="img.jpg" class="img-responsive">
</div>
CSS
.imgwrapper {
width: 80%;
}
The above should in theory make the imgwrapper 80% of the width of the parent-element, and the img-responsive-class on the image will fill up the whole wrapper.
If this doesn't answer your question, could you explain a bit better what you mean with keep original width, but make it responsive? Since making it responsive will resize the image, which means it will not have the original width.
You should have a wrapper around the image defining the actual size of the parent that could be used to place that image. It will be related to the parent div. Then apply .img-responsive to the image. This will cause the image to have the same width as the wrapper.
HTML
<div class="wrapper">
<img src="your-image.jpg" class="img-responsive" />
</div>
CSS
.wrapper {
width: 50%;
}
If you want to keep the original size (it will be resized to have small size but never higher), you should also add a max-width which will have to correspond to the image's original size. This will overwrite the original value of 100%
.wrapper img {
max-width: 280px;
}
The .img-responsive class applies max-width: 100%; and height: auto; to the image, so if you want to keep its original width explicitly you have to set width of image using width attribute of img tag.
Why does padding and margin work on block img, but not on inline.
I am having a layout problem with my images in CSS. I want no pixels (no margin, no padding) between each image, and I want a row of 4 images.
The only way padding or margin (setting to 0) works is if I use display:block as part of the style for the image. As soon, as I use inline, there are several pixels between each image and the padding and margin is ignored.
Anyway that I can get my own paddings and margins in images that are inline?
So you want an image to display inline, but act as a block?
Have you tried display: inline-block;?
I've found wrapping all img to div as a really useful practice.
<div class="image">
<img src="/path/to/image.jpg">
</div>
It is userful for adding any additional actions with images.
For example, you want to crop all of them to fit 400x200 block. You just do:
<style>
.-crop {
overflow: hidden;
}
.-crop img {
min-width: inherit;
min-height: inherit;
}
.image {
width: 400px;
height: 200px;
min-width: 400px;
min-height: 200px;
}
</style>
<div class="image -crop">
<img src="/path/to/image1.jpg">
</div>
<div class="image -crop">
<img src="/path/to/image2.jpg">
</div>
When images are wrapped, it is easier to solve some tasks. You need to make images bigger on hover? They are wrapped, you change img size, but not div, so your layout is ok. You need images to slide up with 20px on click? Same strory. You want them to be in center of some 400x200 area? They are wrapped, add vertical-align and text-align to div.
Of course, in common cases just img is fine. But when suddenly you have to add some additional actions -- you need to wrap them. So i wrap them everytime even if there is no need at the moment. Just for future.
You could use display: block and float:left if you want to have more images in one row.
I have an img element with style='width:40%;height:40%;'. I would like to add a div that automatically wraps it. However when I insert the div instead of wrapping the img it just expands to the div inside.
How can I force this div to wrap img so it can be used as a frame. The reason why I do not preset the div's height and width is because img's percentages will be given dynamically, so div should wrap the img according to img's sizes.
If you do it like this
<div id="wrapper">
<img src="...">
</div>
you could add the display: inline-block; attribute to the wrapper. That did it for me. Yet still, your style='width:40%;height:40%;' will make its height being adjusted by its parent as #jesse-van-assen already mentioned.
The problem with a width and height of 40% with an image tag, is that the image isn't downscaled to 40% of it's original size, but takes up 40% of it's parent, as you can see here.
In your case, you want to wrap the image in a div, but still want to size it to 40% of it's parent. In this case, the parent IS the wrapping div. You see the problem.
If you just want to use the div as a frame, you can use css to style the image to gain a similar effect, like this:
<img src="..." style="border: 1px solid #000000; padding:10px;"/>
Example of this principle here.
make all your images float to left.
img
{
float:left;
}
and clear each div with
<div style="clear:both"></div>
as the very last element in the wrap div before it closes.
hope it helps.