When I try to assign a height to my <div> that contains an <img>, it’s not modified, just moved.
.banner #dornierenvoj {
left:-95px;
bottom:-90px;
height:-100px;!important
position: absolute;
}
<div id="mapplane">
<img src="templates/protostar/images/planeminiature.png" />
<div id="dornierenvoj">
<img src="templates/protostar/images/dornierenvoj.png" />
</div>
</div>
First there is no negative height or width in css !
Second U can use this code to give that image height :
.banner #dornierenvoj img {
height:100px;
}
That's because the css points to the div, not the image.
you have 2 options:
1: add a class to the image
.bannerImage {height:30px;}
<img class="bannerImage" src="pic.png">
define it in the css
#dornierenvoj img {height:30px}
<div id="dornierenvoj"><img src="pic.png"></div>
the code inside the {} will work on all images inside the div dornierenvoj.
use this :
<img src=""templates/protostar/images/planeminiature.png" width="400" height="400">
THIS IS AN EXAMPLE of width and height
Related
I'm dealing with img tags which are have a fixed width & height.
The question is that a have a set of images that each one has its own dimensions, so in the resulting view, some of them vary in height keeping the width constant.
This is what I get:
... and this is what I want to accomplish:
Is there any way that whatever image is loaded in the img tag keep proportions and be all with the same height?
you can use css and set the property of width and height to what ever you want
img
{
width : 150px;
height : 150px;
}
<img src="https://static.pexels.com/photos/57825/pexels-photo-57825.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/149941/pexels-photo-149941.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/163145/laptop-computer-coffee-yellow-163145.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/7107/notebook-hero-workspace-minimal.jpg" alt="no image available" />
Please try the following:
1. Put the images into 'div's
Eg.
<div class='image-container'>
<img src="yourimage.jpg">
</div>
adjust the height of the in the stylesheet:
.image-container img{
width:100%;
height:100%;
}
adjust the width of the 'div's to fill quarter of the page:
.image-container{
width: 25%;
}
In the codes below, I have two <div> tags. I want to align one <div> to the left and the other to the right, with the same height and width. Please help me to do this.
<div id="imgShow">
<panel>
<img class = "hidden" id="orginal" alt = "Goofy pic of me" runat="server" />
<div id="ScrollImg" style="position:relative;width:900px; height:330px;overflow: scroll; top: 3px; left: -1px;left:auto">
<canvas id = "drawing" height="1500" width="1200" >
<p>Canvas not supported</p>
</canvas>
</div>
</panel>
</div>
<div id="divComplete" style="position:relative;width:100px; height:330px;overflow: scroll; top: 3px; right: -1px;right:auto"></div>
Set the floats for each div with CSS: example
.left { width:50%; float:left; height:200px; background:red;}
.right { width:50%; float: right; height:200px; background: blue;}
Try below code:
Demo
<div id="imgShow" style="width:50%; height:330px;overflow: scroll;float:left;">
<panel>
<img class = "hidden" id="orginal" alt = "Goofy pic of me" runat="server" />
<div id="ScrollImg">
<canvas id = "drawing" height="1500" width="1200" >
<p>Canvas not supported</p>
</canvas>
</div>
</panel>
</div>
<div id="divComplete" style="width:50%; height:330px;overflow: scroll;">Canvas not supported</div>
You should use floats:
<style>
#imgShow, #divComplete{
float:left;
width:50%;
}
</style>
If you want both at different widths, simply separate the css selectors and add the desired width.
PS: Avoid using inline CSS unless you need to, transfer these to a separate CSS file and include it in the head section
You can use twitter bootstrap css for styling your divs. Simply addclass="col-xs-6" to each div. Remember class="col-xs-12" is the full width that the div can take based on the width of the parent container. Using -xs- instead of -md- shrinks the div upon resize instead of knocking them down. If you want margins simply add change them to col-xs-5s then add a col-xs-2 div in between. It's also good practice to use parent divs with container-fluid and row classes
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 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
How can I place only an image in a div as background image, and add url link to it.
Currenty I'm doing it this way:
<div class="image"><img src="books.png" alt="Test" /></div>
I want to do something like following, but its not working (the image does not appear).
<div class="image"><span class="books"></span></div>
Thanks.
Place the background image in the <a> tag if you want it clickable.
your css:
.image a { display: block;
background: url('image.jpg') no-repeat;
height: 50px; /* obviously use the same dimensions as your image */
width: 50px; /* obviously use the same dimensions as your image */
}
<div class="image"> </div>
or better yet, get rid of the div entirely, and just apply the image class directly to a:
<a class="image" href="example.com"> </a>
It's likely it's because the div is empty. Try something like:
<div class="image"><span class="books"> </span></div>
If it's still not showing, set the "image" class to have a background color too, so that you can see how big the div 'thinks' it is.
If you want an image to be in the background you need to set, the style property "z-index:-1", that way, the image will be in the back of the other elements in the same content div
Does it have to be a DIV?
I am writing the style inside you can use it in css file
<a class="image" style="display:block; width: (image-width); height: (image-height); background: url(image-link)"></a>
this will work...
you can use it like this if you need div..
<div class="image" style="width: (image-width); height: (image-height); background: url(image-link)"></div>