I have a bunch of images being displayed one at a time in a div. The images are all a few thousand pixels by a few thousand pixels.
For example, one image is 4353x2721.
When I preview the page, it zooms in the picture and cuts out things along only the top and bottom edges. It remains the right width.
I need it to just resize it so that it fits the screen/div properly without cutting any parts.
The CSS for that section is:
.largeImage img {
position:absolute;
top:0;
left:0;
width:100%;
}
If I add height:100%;, it still doesn't work. Still zooms in.
You need to set max-width: 100% and max-height: 100% for image. It will make image to fit its larged dimension to parent container limits and scale down other dimension.
Look at snippet:
.largeImage {
width: 150px;
height: 200px;
display: inline-block;
position: relative;
border: 1px solid green;
}
.largeImage img {
display: block;
position:absolute;
top:0;
left:0;
right: 0;
margin: 0 auto;
max-width:100%;
max-height:100%;
}
<div class="largeImage">
<img src="http://lorempixel.com/output/food-q-c-640-480-5.jpg">
</div>
<div class="largeImage">
<img src="http://lorempixel.com/output/nature-h-c-640-1233-7.jpg">
</div>
Related
i just combine three logo picture as png format becouse of reduce the times of requesting to server and improve the speed.
i can position the entire picutre with absolute attribute for example
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
[enter image description here][1] [1]: https://i.stack.imgur.com/VGKVu.png
but what i want is how make one picture to 3 pieces and set each of them to special area
what code i should write?
I think you are looking for image sprite
#icon{
left: 63px; //define part of image
width: 43px;
background: url('picture.gif') 0 0; // defines the background image and position(image, left, top)
}
I think you're looking for this.
html
<div class="logos">
<div class="img1"><img src="https://dummyimage.com/200x200/000/fff"/></div>
<div class="img2"><img src="https://dummyimage.com/200x200/000/fff"/></div>
<div class="img3"><img src="https://dummyimage.com/200x200/000/fff"/></div>
<div>
CSS
.logos>div{
position:absolute;
}
.logos>div.img1{
left:0;
top:0;
}
.logos>div.img2{
right:0;
top:0;
}
.logos>div.img3{
right:0;
bottom:0;
}
I have a div with image inside it. Following is the CSS
img {
width: 100%; /* or any custom size */
height: 100%;
object-fit: contain;
}
body, html {
height: 100%;
}
#mydiv {
border:5px dashed #0000cc;
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
HTML is -
<div id="mydiv" class="animated zoomIn">
<img src="img/6.gif"/>
</div>
The image clicks have been generated from this website
Issue : When the image is object-fit inside the div, as it should show as per screen width and height, the image maps (or so called) do not move. In short the image rectangle (the area where the image fits) still fills in div. My expectation was image would shrink its bounds (when I put border to image, it should be smaller than that of div) thus placing the image map correctly. Now the image map are placed all over the screen.
Any pointer how I can achieve true responsive image map (or a href) in images with object-fit of image?
You can use object-fit: cover; Hope it will solve your problem. Here's my solution.
img {
width: 100%; /* or any custom size */
height: 70vw;
object-fit: cover;
object-position: center center;
}
body, html {
height: 100%;
}
#mydiv {
border:5px dashed #0000cc;
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
overflow: hidden;
}
<div id="mydiv" class="animated zoomIn">
<img src="https://i.imgur.com/J67Ukc8.jpg"/>
</div>
so i have 3 images they all are using the same code with different style of course first image is on left second image is in middle and third is on right.
bottom: 10;
left: 0;
right: 0;
position: fixed;
text-align: center;
margin: 0px auto;
okay so the issue i'm having is when you are to hover on the image it can only hover the pointer on either top part of the image but when hovering over the image on bottom then it detects no link at all.
sample of code for image I'm using
<a href="/"><img style="width: 130px; height: 130px; border: 0px; display: inline;" src="img">
</a>
All of the images are different sizes but one the first image i resized the image to like 150px width and 100 width height then the hover start working but i want the image to be hover on 100px width and 50px height and when i do that it only hovers over right side of the image and this image is the first image on left. Second image i tried resizing but it only hovers on top of the image. any help will be appreciated :)
There's a problem in your CSS. All of your <div>'s containing the anchor tags and the images have a fixed position along with left: 0 which is why they are overlapping. You can achieve what you're trying to do like this, I've modified the HTML and added new CSS:
#images {
text-align: center;
}
#images a:nth-child(2) {
display: inline-block;
float: left;
}
#images a:last-child {
display: inline-block;
float: right;
}
<div id="images"><img style="width: 100px; height: 100px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" />
<img style="width: 100px; height: 80px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" />
<img style="width: 100px; height: 80px; border: 0;" src="http://7brands.com/wp-content/uploads/2014/07/google-maps-logo.jpg" /></div>
I dont know exactly your need, from my understand you can do it as follow:
Add this css styles and hover the image:
#img1 {
bottom: 10;
left:0;
right:0;
position: fixed;
text-align:center;
margin: 0px auto
z-index:1;
}
#img1 img:hover {
width:100px !important;
height:50px !important;}
Fiddle:http://jsfiddle.net/1hwm3epj/16/
AS shown in image I have a [wrapper] div which has background image inside this Image I want to place another div but as the Screen size changes the background image has different dimensions and thus the position of second div must change.
I have tried jquery to get width and height of the background image but it gives out 0,0.
What should I do.
jsfiddle code jsfiddle[dot]net/AFvak/
To my knowledge, there is no facility for querying for that kind of information about a background image. The only solutions I've seen seem to involve just loading in the image by some other means (e.g. with an img tag) and then querying that for the information.
See: How do I get background image size in jQuery?
If the center div should always be centered with a fix height and width then you could try this:
<div class="wrapper">
<div class="inside"></div>
</div>
Styles:
.wrapper {
width: 600px;
height: 500px;
margin: 40px auto 0;
position: relative;
border: 1px solid black;
background: url(image_here.jpg) no-repeat center center;
}
.inside {
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin-top: -50px; /* height/2 */
margin-left: -100px; /* width/2 */
position: absolute;
background: #000;
}
DEMO
try ..
$backWidth=$(window).width();
$backHeight=$(window).height();
As per my understanding you try to div tag should be on image with fixed position even browser will resized.
Here code:
<div id="wrapper">
<div id="test">
<img src="test.jpg" id="yourimg">
<div id="yourdiv"></div>
<div>
</div>
<style>
#test{
position:relative;
}
#yourimg{
position:absolute;
top:100px;
left:100px;
}
#yourdiv{
position:absolute;
top:120px;
left:120px;
}
</style>
I'm looking to recreate the effect here on images 2 and 3: http://www.jessicahische.is/illustrating/penguinsinbathingsuits
These images obviously have "padding" filled in already by the image itself, but I was wondering if this effect is possible with just jQuery and CSS?
Any help or insight would be great, thanks!
A simple method for centering items. Try something like this:
.box {
display: block;
height: 500px;
width: 500px;
background-color: #eee;
margin:0;
padding:0;
vertical-align:center;
}
.center_item {
display: block;
height: 100px;
width: 100px;
background-color: #aaa;
margin:0 auto;
padding:0;
}
And the corresponding HTML.
<div class="box">
<div class="center_item">Put your image here.</div>
</div>
What this does is simply puts a container around whatever you need to be centered. By using margin:0 auto; you can center any item within it's parent. I hope this is what you were looking for.
jsBin demo
In this example, we use text-align:center; for our element #gallery
and force the image to be 100% height.
Than with jQuery we check that image on .load() to see if the image width exceeds the gallery width. In that case we'll change the width and vertical-center-alignment with jQuery. E.g:
CSS:
#gallery{
position:relative;
margin:0 auto;
width:600px;
height:500px;
border:1px solid #aaa;
text-align:center;
}
#gallery img{
height:100%;
}
jQuery:
$('#gallery img').load(function(){
img = $(this);
imgW = img.width();
if(imgW > $('#gallery').width()){
img.css({width:'100%', height:'auto'});
img.css({marginTop: $('#gallery').height()/2 - $(this).height()/2 });
}
});
Play with the images widths/heights to see how they respond.