I have an image on a webpage. It's a pretty big image, however. It's 6144*768. In actuality, it is a series of 6 images mushed together.
I read that it's better practice to load this one image instead of loading 6 images. I've found this to be true as well, when I used tables and CSS.
However, when I set this image as the source of an image element and then set the size of the image element to 1024*768, the image is squished. Ack!
How can I get this image to be not-squished by using only Javascript? Also, how could I move the background of the image?
[example: Imagine a really long strip of paper. Then, place a small cut-out rectangle of paper over that somewhere on the strip of paper, so that you can only see the part of the strip that is inside the rectangle. This is what I want to do]
Place the image inside a container element, and set the overflow to hidden using CSS.
Leave the image as it is and it won't be squished
HTML
<div id="imgContainer">
<img src="myImage.jpg" alt="" width="6144" height="768" />
</div>
CSS
#imgContainer
{
height: 1024px;
width: 768px;
overflow: hidden;
}
Then to move the image use negative values for the CSS style margin-left.
#imgContainer img
{
margin-left: -1024px;
}
You can do this with jQuery as follows
$("#imgContainer img").css("margin-left", "-1024px")
What OP is looking for is CSS Sprites (also see A List Apart or Smashingmag).
Don't scale your image with CSS; instead, put it in a wrapper div and do something like this in your CSS:
#myImageWrapper {
height: 1024;
width: 768;
overflow: hidden;
}
Related
So I wanted to make a website which is pc related. I was into coding a few years ago, and I decided to pick it up again. I came across the following problem.
https://imgur.com/VjZaUEZ
If you look at this picture, you can see the part of the site which I made.
I want it to be responsive so that the text on the left side of the picture (explanation of CPU) is shrinking when I shrink my browser.
However, this is happening:
https://imgur.com/LBaHlOu
I want this text which is beneath the picture, to be next to it and shrinking. After a few hours trying things with display: and margin: etc, I decided to ask you guys.
Here are my codes (I know the codes aren't the best):
CSS: https://imgur.com/UOThxjv
HTML: https://imgur.com/DAhC6dx
if you need any clarification, please ask me.
You need to set divs around h4 dynamic width to something like 60%. Make div container for img and set its width to 40%. You should use parahraphs instead of heading-4 for text as well.
Modify HTML:
<div class="text">
<p>your text</p>
</div>
<div class="img-div"><img src="pc.png" alt="pc.png" /></div>
CSS:
.text {
width: 60%;
float: left;
}
.img-div {
float: right;
width: 40%;
}
.img-div img {
width: 100%;
height: 100%;
}
Responsive image map
To make the image map responsive you need to use a js script to manipulate coordinates on window resizing or use .SVG images for image map:
Check out this SO question.
JS image map resizer script
All the dimensions and margins in your CSS code are constant pixel lengths.
Instead, you should make them percentages of the window size. For example, you could make the width of a div tag or an image always be 20% of the screen size by putting in this line of CSS to its CSS class as shown below:
width: 20%;
I am soo bad at css. I have a div in which multiple images can be put. this div is a slide.
<div id="slides">
<img src="imagename.jpg"/>
</div>
some images are e.g. 100x300 but some are 300x100. how can I scale those images according to their own dimensions so that they show up as in original form?
my live example with this bug is in here:
http://wohne-wo-du-willst.de/angebot/Wohnung/ist-frei-in-Dachau/22/
as you slide, the 3rd slide image doesnot show up in its full form..
A big problem you have here is that your images aren't 100x300px or 300x100px, they're instead 1920x2560px or 2560x1920px - much, much larger. They're also all around 1MB in size, which in reality is far too large for images like this. Before doing anything you should resize these images yourself to make them their desired size and ultimately reduce their file size as well.
After that, simply remove the max-width and max-height properties from your #slides img selector, then modify width and height to:
#slides img {
...
height: initial;
width: initial !important;
}
The initial value sets the image size to its initial size; that means if your image is 100x300, that is also its initial size. Using this with the images you currently have will set them to 1920x2560 or 2560x1920.
I've unfortunately had to use !important here as the slide plugin will try to force your images to 100% width.
<style>
img
{
height:100%;
width:100%;
}
</style>
<div id="slides">
<img src="imagename.jpg"/>
</div>
I'm working on a web app where I have an image, and, for lack of a better word, a "view" of that image which is a box limiting what you can see to whatever part of the image is inside the box. The view can be adjusted by dragging the edges around, and the image is stays. However, I also want to be able to drag both the view and the image around together.
The best analogy I can think of is the Snipping Tool in Windows that you use to capture a portion of your screen.
I've tried a div with a background image, but that always resizes the image to fit the div. Right now I'm trying to have a div that contains an img, and setting the div to have overflow:hidden, but that makes the image stick to the upper left corner of the div.
Help? Thanks in advance!
Sounds like you want something that masks the image and only shows a segment.
Assuming a structure like.
<div class="img-mask">
<img>
</div>
You can set the styles of the mask to be overflow hidden with a width and a height (this creates the mask). Then position the image relatively, left and top till it's where you want it to be.
.img-mask {
overflow: hidden;
height: 200px;
width: 200px;
}
.img-mask img {
position: relative;
top: -25%;
left: -25%;
}
This should center the image to the mask.
I think there's a CSS property cut out for exactly this task: the clip attribute.
Here's the W3schools tutorial: http://www.w3schools.com/cssref/pr_pos_clip.asp. Click the Try it Yourself button to get a hands-on idea.
With this the CSS property applies only on the image and you do not need an additional masking div.
Ok so let me explain. Lets say there is a small image and when you hover over it, there will be a new and much larger image (an enlarge version of the image). Thats easy, but wait! I want the larger image to be right on top of the smaller image and when you hover out of the smaller image, the div goes away. The problem is that when you display the larger image on top of the smaller image, the mouse is hovering over the larger image and not the smaller image. I want to make it so that the mouse stays hovering on the small image while having the larger image on top if it. And when you hover out of the smaller image the larger image disappears. The key is having the larger image on top of the smaller one (covering it up), but having the mouse under the larger image. Cant figure this out! Thanks guys
No, the mouse is always on top. But, you can accomplish the functionality you want - to hide the larger image when the mouse leaves the smaller image. There's more than one way to do it, for sure. Here's the approach I'd take.
HTML:
<div class="imgHover"></div> <!-- This div is the element that is hovered -->
<img class="large" src="largerImg.jpg" />
<img class="small" src="smallerImg.jpg" />
CSS:
.small, .imgHover
{
height: 55px; /* Set the div's size to match the smaller image */
width: 80px;
}
.imgHover, .large
{
position: absolute;
}
.large
{
display: none;
z-index: 2;
}
.imgHover:hover + .large /* this bit is the important part */
{
display: block;
}
.imgHover
{
z-index: 3;
}
If you want to do it with JavaScript instead of pure CSS, that's ok. Set it up with the same css, but use div.imgHover to attach your mouse events.
The solution would be to handle hover on the larger image but in the handler have the larger image go away when the pointer's x and y positions leave the boundaries of the smaller image.
Sounds like your problem is because with the .hover() because you have the new div opening over the old one it causes the .hover() to fire the mouseOut function. The best solution is to add to the .hover() so the mouseEnter also includes the larger image that "grows" out of the smaller image.
something like
$("#small_image, #large_image").hover(function (){...},function() {...});
So I know how to change the css depending on the resolution via javascript.
How would one go about 'cropping' an image depending on the screen resolution?
Well you can get the screen details from window.screen - though personally I would recommend just finding out how big the current window is, the only reason not to is if you are going to resize the window and that is very frowned upon.
Once you know the sizes and how big you need to make your images, I find that images are cropped easiest by placing them inside a containing DIV with overflow: hidden; set. You can then size the containing DIV to the size required and set the top and left CSS attributes od the image to the negative values of the coordinate you want for the top-left visible corner.
<div class="crop-container" style="width: 200px; height: 200px; overflow: hidden;">
<img src="something-400x400.jpg" style="top: -100px; left: -100px;" width="400" height="400" alt="Something" />
</div>