I have the following setup
<div id="outerDiv" style="width:100%;">
<div id="innerDiv">
<center>
<a href="http:/..." title="..">
<img src="http://...jpg" width="800" height="xxx" alt="..">
</a>
</center>
</div>
<div>
The width of the outerDiv can change based on browser view-port. Is there a way to restrict the width on the innerDiv just by using a style attribute, such that it overrides the included image width (800 in this example). Currently the image spans beyond the viewport and I would like the div/browser to shrink the image to the inner-div-size.
Am looking for something like:
<div id="outerDiv" style="width:100%;">
<div id="innerDiv" style="attribute:xxx;" or something similar>
<center>
<a href="http:/..." title="..">
<img src="http://...jpg" width="800" height="xxx" alt="..">
</a>
</center>
</div>
<div>
Please note that : the innerDiv is rendering 'variable' data coming from a stored parameter for instance. I only have control on the style on the innerDiv to make sure that things like 'center' or 'width' on the innerHtml does not go beyond what the outerDiv is setting. I have tried to use 'max-width' on the outer-div, but that didn't seem to work (I am not an expert on html/css - so I could have done it incorrectly).
Many thanks for all your help !
max-width property can help you.
Remove width attribute from img tag and write additional css code:
<style>
#innerDiv { text-align: center; width: 800px; }
#innerDiv a > img { display: inline-block; max-width: 100%; }
</style>
ComFreak has the complete answer.
Remove the center tag and instead add some css. Also add an id to that image if you want to target only that image specifically as far as its size.
#innerDiv {
max-width:800px;
margin:0 auto;}
img {/*use 'img#idOfimage' instead of 'img' if you end up adding an id to image */
width:100%;
height:0 auto;}
This should take care of it. You can put the css in a style tag in the header or better yet in a separate css file.
Don't use center tag. It defentinatly is outdated. Instead use margin: 0 auto; That will center the content. And use the max-width property for the innerDiv id. This is a great reference source. http://www.w3schools.com/cssref/pr_dim_max-width.asp
Related
I am building a few websites and always have this same problem with css.
I have two images inside a div container.
When i put for example a text inside a div the div takes the heigth of the text but when i put an image in for some for me unknown reason the div suddenly seems to have a default heigth.
As you can see i have made the size of the images responsive in my css. I ve involved a color on the div just to give a clearer look on what happens.
When i narrow my browser screen the heigth of the div stays equal ( thus not being responsive) and for some reason the images are pushed down inside the div.
How can i solve this.I want the div container height to be responsive as the images inside are and holding the same height as the images and as i narrow the browser screen.
Last but not least ... what is it that i do not understand ?
Thank you for helping me out.
My code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="background-color:red;">
<img style="height:2vw; width:4vw;" src="image.jpg" alt="en">
<img style="height:2vw; width:4vw;" src="image.jpg" alt="en">
</div>
</body>
</html>
If you want the parent div to have a certain size, you should enforce dimension on the div and inherit its properties to its children...
div{
height: 50vh;
width: 50vw;
background: red;
}
div>img{
height: 100%;
width: 100%;
}
<div>
<img src="image.jpg" alt="text">
</div>
you should try adding display: block; to <img> tag.
I hope this help.
If you aren't using Bootstrap or another css framework, maybe you need to add reset.css file to your project. Example of reset: https://meyerweb.com/eric/tools/css/reset/
Please check this. I think it will help you. codepen
div{background-color:red;width:200px;overflow:hidden;}
div img{height:auto; max-width:100%;display:block;}
<div>
<img src="image" alt="text">
</div>
Try using max-width:100% on the image. This will keep it's size limited to it's parent size.
I need to remove border/outline ( I don't know what exactly is ) from an image loaded in Span using CSS.
This is the HTML code:
<div>
<span class="BG"><img class="EU"></span>
</div>
And this is the CSS:
.BG{
background-color: #017b5b!important;
display:block;
}
.EU{
background-image: url('http://bet.dn1.it/images/broker.png');
background-position: -190px -362px;
width: 189px;
height: 50px;
display:block;
margin:0 auto;
}
You can find the example here: JsFiddle
Thank you very much to support.
Ciao
Since you are using background-image, change the html element.
You can use a span for example.
JSFIDDLE
https://jsfiddle.net/3vwjc26t/
<div>
<span class="BG"><span class="EU"></span></span>
</div>
You dont need an img tag for this. Just use a div.
<div>
<span class="BG"><div class="EU"></div></span>
</div>
This is because you are using a <img> element without a src attribute, since you are using CSS to add it as background-image you should switch to a different element type like a <span> or <div>.
Like so:
<div>
<span class="BG"><span class="EU"></span></span>
</div>
Edited Fiddle
So there are two things that you can do.
1. If you must use the <img> tag you can create a blank.gif (1px x 1px) transparent image and set the source to blank.gif <img src="blank.gif" class="EU">
2. As everyone else has said you can just change your <img> tag to a <span> or <div>
The default behavior of an <img> tag that does not reference an image or a valid image is to set a border around it. There does not seem to be a way to remove this border.
I am using imgix to server my images. They have a great library for serving jpegs at just the right size and pixel density. But it doesn't work when I need to add links to those images.
Here's the fiddle & the code:
jsfiddle.net/L95suygs/1/
<style>
...
.feature-img {
width:23%;
margin:0 1% .5em;
height:320px;
float:left;
overflow: hidden;
text-align: center;
overflow:hidden;
}
#media (max-width:1024px){
.feature-img {
width:48%;
margin:0 1% .5em;
}
}
#media (max-width:480px){
.header-img{
width:100%;
margin:0 0 .5em 0;
}
.feature-img {
width:100%;
margin:0 0 .5em;
height:200px;
}
}
</style>
<div class="container" id="example1">
<!-- Header Image -->
<div class="header-img">
<img class="imgix-fluid" data-src="//assets.imgix.net/examples/octopus.jpg?fit=crop&crop=faces" >
</div>
<div class="feature-img">
<img class="imgix-fluid" data-src="//assets.imgix.net/examples/jellyfish.jpg?fit=crop&crop=faces">
</div>
<div class="feature-img">
<img class="imgix-fluid" data-src="//assets.imgix.net/examples/lionfish.jpg?fit=crop&crop=faces">
</div>
<div class="feature-img">
<img class="imgix-fluid" data-src="//assets.imgix.net/examples/clownfish.jpg?fit=crop&crop=faces">
</div>
<div class="feature-img">
<img class="imgix-fluid" data-src="//assets.imgix.net/examples/fin.jpg?fit=crop&crop=faces">
</div>
</div>
<script type="text/javascript">
var options = {
updateOnResizeDown : true,
updateOnPinchZoom : true,
fitImgTagToContainerWidth: true,
fitImgTagToContainerHeight: true,
pixelStep : 10,
onChangeParamOverride: function(w, h) {
var dpr = Math.ceil(window.devicePixelRatio*10) /10;
return {"txt": "w:" + w + " h:" +h + " dpr:" + dpr,
"txtalign": "center,bottom",
"txtsize": 20,
"txtfont":"Helvetica%20Neue,bold",
"txtclr":"ffffffff",
"txtpad":20,
"txtfit":'max',
"exp":-2
}
}
};
imgix.onready(function() {
imgix.fluid(options);
});
</script>
The Short Answer
Add something like the following to your CSS:
.feature-img > a {
display: block;
width: 100%;
height: 100%;
}
This gives a definite size to your <a> tag, so its child image will be sized accordingly.
-- OR --
Change your HTML from this:
<div class="feature-img">
<img class="imgix-fluid" data-src="..." >
</div>
to this:
<a href="http://google.com" class="feature-img">
<img class="imgix-fluid" data-src="...">
</a>
This applies the .feature-img style that's already nicely defined to your <a> tag, rather than applying it to an unnecessary parent <div> and using the <a> tag as a child.
The Long Answer
Marking an image as imgix-fluid means it will always size itself to fit its container's width (and in this case height, since you're passing in fitImgTagToContainerHeight: true).
In your standard case (<img> tag wrapped in a <div>), this behaves exactly as expected. Your <div> tags size themselves properly thanks to your CSS, and imgix.js ensures that the images inside it are the proper size, because you've marked them as imgix-fluid.
However, when you wrap an image in an <a> tag as you've done with the second image in the example, the <img>'s parent container is no longer the handsomely-sized <div>, it's now an <a> with no styling applied to it whatsoever. And, because <a> is an inline element by default, it has no inherent sizing of its own--inline elements size themselves to fit their contents. The <a> sizes itself to fit the <img> inside of it (which has no src attribute, and therefore will be sized to something small but inconsistent from browser to browser), and imgix.js sizes the image inside it to be as small as its parent <a>. It's kind of a chicken-and-egg problem, but it ends in disappointment instead of continuing indefinitely.
As stated above, there are two solutions you could use:
Simply apply some styles to your <a> tag. If you set it to display:block; and set width and height to 100%, the anchor will automatically fill the space created by its parent <div> and consequently imgix.js will size the child <img> appropriately.
Ditch the parent <div> in this case and just make the <a> the container! Replacing the outer <div> with an <a> works perfectly, as long as you give the <a> the feature-img class.
For my money, the second approach seems cleaner and makes more sense.
Hope this helps!
I don't know if this is possible or not, but any help would be very appreciated.
I have this code in my HTML:
<img src="mountains.jpeg" class="green inline-image" data-caption="A picture of mountains!">
where data-caption is a custom attribute.
I want to do something like this.
As you can see, the data-caption has to be in a small box right under the image, with the exact width as the image. I don't know if this is possible or not, so can you recommend an alternative way if not?
I tried doing something like this:
<img src="mountains.jpeg" class="green inline-image">
<div class="photo-caption">
A picture of mountains!
</div>
CSS:
.inline-image {
width:30%;
}
.photo-caption {
width:30%;
background-color:blue;
}
This works, but I'd prefer to not have to make a new <div> for every caption. I'd rather have it in the <img> tag.
Thank you very much!
Yeah it's possible using css content but problem in your case is you are using it on an img element which won't work on some browsers.
A different approach I would suggest is to insert your img element inside a div and have that custom attribute in there.
html:
<div class="img-block" data-caption="A picture of mountains!">
<img src="mountains.jpeg" class="green inline-image" >
</div>
css
.img-block:after {
content: attr(data-caption);
}
Reference
I am trying to position a loading image in the buttom right of the page, but everything works fine except margin-bottom.
<div id="preload">
<div align="right" style="margin-bottom:40px; margin-right:50px;">
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
<br>
<a style="color:#00ff24;"><b>Please wait while the page is loading...
<br>If the website doesn't load within one minute please refresh your page!</b>
</a>
</div>
</div>
Can anybody tell me what or how to make it work?
Thanks
It's the nature of margins vs padding. Since margins sit outside of the element, they won't render unless there's another element following. You could use bottom-padding of 1px on the parent; that should trigger the render.
You should assign position absolute and use bottom and right proprietes.
http://jsfiddle.net/7yrUy/
<div id="preload">
<div align="right" style="position:absolute; bottom:40px; right:50px">
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
<br><a style="color:#00ff24;"><b>Please wait while the page is loading...<br>If the website doesn't load within one minute please refresh your page!</b></a>
</div>
try absolute position and use bottom/right instead of respective margins:
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" style="position: absolute; bottom:40px; right:50px;"/>
Here - http://jsfiddle.net/maximua/SKcvr/
If you want it in the bottom right of the page just use this css:
.yourClass {
position: absolute;
right: 0;
bottom: 0;
}
If you want to change the amount of pixels change 0 to what you want
I had a case where I needed to add display: inline-block.
I can't explain why this worked, but it did! :-) Hope it helps someone.
Even when set display:block to parents and child divs, the margin bottom may not work. The best thing to solve this, after testing with paddings and big margin top values, is using position:relative; for the parent container, and position:absolute; for the child div. The div and other elements have already the display-block for default, so we don‘t need to declare it, as follows:
.parent{
position:relative;
height: 20rem;
/* A big value for height will help you to see the “margin-bottom” with clarity. */
}
.child{
position:absolute;
bottom:0.25rem;
/* or whatever measurement you want: 1rem, 1em, 15px, etc. Be AWARE that it‘s not “margin-bottom” property; it‘s just “bottom” within the absolute position. */
}
In the HTML just consider:
<header class="parent">
<p>This is your main container which has 20rem of height.</p>
<div class="child">
<p>This text is very close to the bottom.</p>
</div>
</header>
In the CSS I consider only the most relevant properties. You can add colors, backgrounds, font-families and so on, which will not affect the layout. I just coded the key properties to create the “effect margin-bottom”.
Example more fancy.