I'm using http://www.paulvanroekel.nl/picasa/visuallightbox/ plugin, to create a gallery, actually works perfectly, but I have a problem with the blank spaces between images, cause by the different image dimensions, so I need to create something like this
https://pbs.twimg.com/media/BM-usuxCIAAthp9.jpg:large to keep the grid consistent between all the images.
The markup is:
<div>
<a>
<img>
</a>
</div>
I try the #caramba solution resulting in this
http://jsfiddle.net/montogeek/x4PJ5/
How I can change the dimensions of the image to look consistent?
something like this ?
http://jsfiddle.net/rzWKR/1/
<div class="img-box">
<img src="https://pbs.twimg.com/media/BM-usuxCIAAthp9.jpg:large" alt="" />
</div>
<style type="text/css">
.img-box {
position:relative;
border:solid 2px red;
width:280px;height:250px;
overflow:hidden;
}
.img-box > img {
position:absolute;
left:-10px;
top:-10px;
}
</style>
Related
I have a four column row(col-md-3) row. Each column has a thumbnail of width-220px and height-360px.How can I fill/cover the thumbnail div with images of different resolution(such as: 1920X1080px or 2480 X 3508 px) ?
I have tried this:
<div class="thumbnail">
<img src="images/highres.jpg" alt="Nosmoking image">
</div><!----End of thumbnail-->
</div>
</div>
CSS:
img{
object-fit: cover;
}
.thumbnail{
height: 360px;
width: 220px;
overflow:hidden;
}
I have used an image of 1920X1080px (wide) and it's just filling the half of the thumbnail.what i want is to keep the aspect ratio and cover the thumbnail. what is the simplest solution?
If I understand you correctly, there are some solutions, you can add different classes to each .thumbnail and add background image for each .thumbnail using CSS, but for now and for your current code, you can add this CSS and can resolve your problem:
.thumbnail > img{
width:100%;
height:100%;
}
EDIT:
If you want to keep the aspect ratio, I suggest adding suitable classes to your .thumbnail HTML element, then add the image using CSS background.
imagine this:
HTML:
<div class="thumbnail thumbnail-1"></div>
<div class="thumbnail thumbnail-3"></div>
<div class="thumbnail thumbnail-4"></div>
CSS:
.thumbnail {
background-size:cover;
backgrond-repeat:no-repeat;
}
.thumbnail-1{
background-image:url("image1.jpg")
}
.thumbnail-2{
background-image:url("image2.jpg")
}
.thumbnail-3{
background-image:url("image3.jpg")
}
You can replace one color with another in CSS3?
by a little tricks you can do this easily . just turn the inside of image ,transparent and then
<style type="text/css">
.bx{
width: 73px;
height: 73px;
background: transparent url("top.png") no-repeat;
}
.bx.yellow{background-color: yellow}
.bx.green{background-color: green}
</style>
and
<div class="bx"></div>
<div class="bx yellow"></div>
<div class="bx green"></div>
at the end
For some odd reason I added a responsive image to my responsive layout and it seems to add some sort of spacing below the image.
You may view the issue here: http://www.client.noxinnovations.com/jensenblair/
The top image. Here is my HTML and CSS.
HTML
<div class="header"> <img src="images/photograph.jpg" /> </div>
CSS
img {
max-width: 100%;
height: auto !important;
}
.header {
height: auto;
padding: 0;
margin: 0 auto;
border: none;
}
It seems to be consistent in each browser. Any ideas anyone?
There are two ways (that I know of) to solve this: http://jsfiddle.net/3kC4K/1/
<div>
<img src="http://placehold.it/100x100/"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="block"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="inline"/>
</div>
CSS
div{
border:solid 1px #f00;
margin:5px;
float:left;
}
.block{
display:block;
}
.inline{
vertical-align:bottom;
}
img tags, by default, are inline elements. Because of this, browsers will create a sort of "gutter" underneath them so that any text that wraps below it won't be flush with the bottom of the image.
In your case, simply applying display:block to the image should do the trick.
I am attempting to overlay an image above a pdf embedded in and iFrame.
This code results in the image falling behind the iFrame (tested by changing the bottom attribute to -10px and the bottom of the image becomes visable)
The only two methods I was aware of were using z-index, and the fact position absolute should place the object on top, but neither appear to be working.
<div id="images" style="float:right;position:relative" width="400" height="250">
<img src="images/Next_Black_Arrow.png" style="height:25px;width25px;float: left;z-index=10;position:absolute;bottom:10px;left:250px;">
<iframe SRC="testFiles/Categories of pattern matching characters.pdf#toolbar=0&navpanes=0&scrollbar=0" style="z-index=1;position:relative;" width="400" height="250"></iframe>
</div>
*Applogies for the lack of separated css
While that works, unfortunately it doesn't if you change the iframe link to a pdf.
See http://jsfiddle.net/vr4rX/4/
I think it must be a bug in the adobe reader. Could really do with a work around.
have a look at my solution: http://jsfiddle.net/vr4rX/1/
HTML:
<div id="images">
<img src="http://t1.ftcdn.net/jpg/00/02/78/72/400_F_2787285_mlDf8ah974XHflVFrbQB3FM6Qxu1MT.jpg" />
<iframe SRC="http://www.google.de" width="400" height="250"></iframe>
</div>
CSS:
#images {
float:right;
width: 400px;
height: 250px;
position: relative;
z-index: 1;
}
#images img {
height:25px;
width:25px;
z-index=2;
position:absolute;
bottom:20px;
right:20px;
}
I have an anchor element with in it a div "imgbox" containing an image and a caption, and a div "textbox" containing some text.
Now when I float the div.imgbox, the img element inside is no longer clickable; the caption and the text in the div.textbox is. This only happens in Internet Explorer; all other browsers work just fine.
Does anyone know what's causing this (and how to solve it)? Thanks!
here's the css and html I'm using:
<style>
.wrap a {
display: block;
overflow: hidden;/* makes this a wrap around floats */
cursor: pointer;
}
.imgbox {
float: left;
}
.textbox {
overflow: hidden;/* positions the div next to the float */
}
</style>
<div class="wrap">
<a href="#">
<div class="imgbox">
<img src="http://jaron.nl/misc/dummy.gif" width="80" height="45" alt="" />
caption text is clickable
</div>
<div class="textbox">
some text here
</div>
</a>
</div>
You are using Block element in div in between the img and a link tag .