I have an image which needs to be in a particular location, so I made a div in the place where I need it to be and added an img tag inside it, however although the img tag is inside the div tag the image goes into the bottom right corner of the page. This does not happen when the browser window is small.
CSS:
#teamimg {
width:10%;
height:50px;
background-color:blue;
overflow: auto;
float:left;
}
HTML:
<div id="teamimg">
<img src="Images/picture.png" alt="Image" height="18" width="20" class="itemImg" style="float:left">
</div>
Set overflow:hidden on the #teamimg rule, then you can put the image as a background-image with background-size:cover;. :)
Related
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
Currently I'm just trying to have an image scale down depending on the window size of the browser. The image is held within an anchor link, so that if you click on it it sends you to the home page.
My problem right now is that when it's resized, the only part of the image that connects to the anchor is a small portion of the bottom, or if I resize it to be smaller, all ability to click on it disappears.
Thoughts? Solutions?
I REALLY don't want to make an image map and scale it dynamically with javascript.
HTML:
<a href="Index.html" id="leftNav">
<img class="bar" id="leftBar" src="./files/images/Nav First.png" border="0" />
</a>
<img class="bar" id="midBar" src="./files/images/Nav Select.png" border="0" />
<a href="#" onClick="goToLastComic(); return false;" id="rightNav">
<img class="bar" id="rightBar" src="./files/images/Nav Last.png" border="0" />
</a>
CSS:
.bar{
display:inline-block;
}
#leftBar, #leftNav{
width:15%;
height:auto;
max-height: 83px;
}
#midBar{
width:55%;
height:auto;
max-height: 83px;
}
#rightBar, #rightNav{
width:15%;
height:auto;
max-height: 83px;
}
I found my problem- I had a form with absolute positioning that was getting in the way. I don't know why I set the form dimensions as I did, but it was a stupid fix. The width threw me off- 100% and 83px height, which is what I did to center the form before I knew about auto margins.
How can we remove space from bottom of box when we use image with width 100% in it
<div class="midVideo"><img src="images/videoImg.png" alt="" /></div>
.midVideo{
width:487px;
display:inline-block;
border-radius:10px;
overflow:hidden;
border:solid 12px #630400;
background:#003;
}
.midVideo img, .midVideo iframe{
width:100%;
}
.midVideo img {
display: block;
}
Add display block property to image
Images are replaced elements. These are treated much alike inline elements - so they are placed onto the baseline of the parent element. The space below is reserved for letters which excess the height like pqg and so on. Since images don't need this space, you just need to define display:block on the image to remove it.
Simple way is
<img style="height: 100%;" src="images/videoImg.png" alt="" />
Hard way is
<div class="midVideo">
<img style="[b]<? $img_size = getimagesize('images/videoImg.png'); if ($img_size[0]>$img_size[1]) echo 'width'; else echo 'height'; ?>[/b]: 100%;" src="images/videoImg.png" />
</div>
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>