I have an image area in which a random image will be visible. How do I make the image fit to its width or height within the image area while maintaining the image proportions?
This is what I tried, but it distorts the image:
<div style="float:right;"> <!-- img area -->
<img style="max-width:100%; max-height:100%;" src="rand/greetings.png"/>
</div>
The following will keep an image horizontally aligned within a div (use the full page link and change the browser size to see the image change size)
#wrap {
border:1px solid #000000;
position: relative;
width: 50%;
height: 400px;
overflow:hidden;
}
#wrap > img {
width: 100%;
position:absolute;
top:50%;
transform: translateY(-50%);
}
<div id="wrap">
<img src="http://lorempixel.com/800/800/city/1/" alt="" />
</div>
Just set width or height to 100% but not both, this will keep the proportions of the image and allow it to scale.
<div style="float:right;"> <!-- img area -->
<img style="width:100%;" src="rand/greetings.png"/>
</div>
EDIT:
To prevent an image spilling out of your area vertically try setting a max-height in pixels on the image and image area:
<div style="float:right; max-height:100px;"> <!-- img area -->
<img style="width:100%; max-height:90px;" src="rand/greetings.png"/>
</div>
if you want to keep it simple, you can set this image as background-image and use background-size:contain;
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")
}
I'm building a responsive site and I have an image that I'd like to have a fixed height, but as the window collapses the image remains centred as the container width decreases. I've have tried several things and I have the height fixed but the image doesn't centralise when in a view less than 100% of the image width.
Any help is greatly appreciated.
Thanks
.container {
overflow: hidden;
}
.container img {
width: auto;
height: 550px;
}
<div class="container">
<img src="http://placehold.it/500x550" alt="alt" />
</div>
see here your height is fixed but also responsive . i just give an example image .
add this class into your image class="img-responsive"
.container {
overflow: hidden;
}
.container img {
height: 550px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<img src="http://media1.santabanta.com/full1/Miscellaneous/Cartoon%20Characters/cartoon-characters-14a.jpg" alt="alt" class="img-responsive" >
</div>
do you know the way to limit image in the div ? I'm creating a website like a http://bezuzyteczna.pl/ On this site if your image has mor than 200px height it is limitig to 100px and on the bottom is showig "Show More" Have anyone any suggestion ?
You can set a max-height and overflow to hidden on the wrapping container of the image.
<div class="image"><img src="[path/to/images]" alt="" /></div>
.image {
max-height:100px;
overflow:hidden;
display:inline-block;
}
.image > img {
display: block;
}
http://jsfiddle.net/qx7Ps/1/
I am using the jQuery Cycle (full) Plugin on a page where I am using a container DIV (.content-left) with a width of 75% and a jQuery Cycle slideshow inside of that container. The images inside of that container should be adjusted automatically.
I use:
JS:
$('.slides').cycle({
fx: 'fade',
containerResize: 1 // default for jquery.cycle.all
});
HTML:
<div id="content">
<div class="content-left">
<div class="slides">
<img src="...">
<img src="...">
<!-- etc. -->
</div>
</div>
<div class="content-right">
some text
</div>
<div class="clear"></div>
</div>
CSS:
#content {
overflow:hidden;
}
#content .content-left {
width:75%;
float:left;
}
#content .content-left img { /* or: .slides img */
width:100% !important;
position:relative;
left:0px;
top:0px;
z-index:-2;
}
#content .content-right {
width:25%;
float:right;
}
On Page init my wrapping DIV's (.content-left) height and width get's adjusted just fine thanks to the containerResize function. However when I resize my browser window, the width and height of the slides stay the same, which is not what I wanted.
containerResize: 0 doesn't bring the desired effect either (it then ignores the height of the images and adjusts the height of the wrapper to the height of .content-right (and cuts off the image)).
When I am using only an image without loading Cycle at all everything works fine.
Any solutions for that?
Thanks!
Set in JS:
containerResize: 0,
slideResize: 0,
(really!) and then use the trick of transparent image in the container div. See here
for detail.
How about trying max-width: 100% !important; on the images, and remove the !important from the width: 100% !important, so that when cycle attempts to resize your slides back to the original width, your max-width definition will take precedence.
If you could provide a jsfiddle, that would also be of great help.
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;
}