I'm getting an image from a url from a Java service. The image size is too big.
How can I decrease it's size using inline css?
Image contains lots of white border from top and bottom. I need to remove that too.
Please remember, that StackOverflow is not made for doing your work. Please try it the next time yourself and google the stuff you want before consulting SO.
Here the first two links if you google css3 cut image, both do more or less the same you want:
CSS Display an Image Resized and Cropped
How to “crop” a rectangular image into a square with CSS?
Anyways, here is a possible solution for you with inline-css:
Place the <img>-Tag with your image in a <div>, which defines the size of the "window", trough which we look at the image (which size remains actually the same).
Here a simple exapmle:
<div style="height:100px; width:150px; overflow:hidden;">
<img src="path/to/your/image" />
</div>
We are using overflow: hidden; here, which says that everything in this box, which is bigger than the box itself, will not being displayed. To adjust the image (because of your white borders), add i.e. style="margin-left: 10px"; to the <img>-Tag. You can also use negative values there.
Related
I want to recreate an interface similar to Windows Phone 10.
You can see an example of what I try to achieve in HTML in this picture:
The middle tiles act like Windows on the baby picture while the space between tiles is black.
There's no magic going on here. In the picture you've supplied the phone has a desktop of a child that is letterboxed (black stripe across top and bottom). The tiles on the top and bottom of the screen are opaque and show their own backgrounds. The tiles in the middle are fully transparent, but have a solid black border to them to show the child behind them.
To make the tiles, you simply need this:
.tile { background-color:rgba(0,0,0,0);
border: 3px solid black;
}
Take a look at this fiddle for a basic example: https://jsfiddle.net/Lnafvvx9/6/
For a dynamic approach:
You could slice a picture in many litte parts (and delete the sliced borders). Then you create and align different divs with a individual background image containing your sliced picture parts.
There is also a kind of work around for static pages:
Create one div with the big (not sliced picture).
Use a transparent PNG image containing only the "border" of the black background. Place that in a div on top of the other div and you got the style. Then you need to add little divs ontop of the positions where you can see the picture.
The important thing is, that these designs require pixel perfect static layout. This means you can't scale divs size or change the position when the browser window or screen is smaller. But its also the easiest way do do that and the last suggestion allows to change the picture without slicing it.
For real dynamic approach you could load the same picture (unsliced) in every button (use different css id for everyone) and position the background of them individually to fit together. The advantage of this is, that you can then use CSS3 for instance to scale the button size on hover. This can lead to a cool expanding image effect. Just look up
http://www.w3schools.com/cssref/pr_background-position.asp
http://www.w3schools.com/css/css3_animations.asp
I hope that helps :)
I'm currently stuck on a problem I can't fix on my own.
I've cut a image into different layers I want to overlay on a website. Basically you can enable and disable various layers.
An example would be this:
Image of a tree without leaves
Actual leaves of the tree
Now there is a checkbox and when you click on it it'll either enable or disable the leaves.
Now I have some options to position those elements via css:
Make all images the same size and fill smaller ones with transparency. Something like this: http://i.imgur.com/GRd4eaI.png
Crop those large images into smaller ones. Here I don't know how to position them via css properly so they'll resize with the other pictures.
Create a canvas and draw the image onto it, then display that canvas.
I've currently implemented this and it works like I want. Problem though is that it'll lag when using the phone (Only renders part of the image till it finally finish after ~20 seconds to display the image properly)
I guess that would be the proper way to go but my problem here is that I don't know how to set the size of the overlaying smaller images.
Html Code:
<div class="container">
<img style="top:0%; left:0%;" src="img.png" />
<img style="top:69.56%; left:26.16%;" src="smallImage.png" />
<img src="images/null.png" id="last">
</div>
And the css code to that:
#container {
position: relative;
}
#container img:not(#last) {
position: absolute;
width: 100%;
height: 100%;
}
The null image is just there that overlaying other images work with that method.
The problem I have here is now that the smaller image will be positioned correctly but it wont shrink down to the proper size inside the div: http://i.imgur.com/4EgGIAl.png
I don't think that this would be the proper way, or easy way to do it. But I guess I'll use this then when I need to.
Also I think it's good to say that I'm working with image maps and areas. So perhaps that'll make it a bit more difficult to use then.
It would be very great if you could help me here, thanks :)
Using css3/html5 only, I am trying to have separate and distinct background images line up side by side, not overlaying each other.
In essence I would love to get multiple separate and distinct background images to behave exactly how the tiling of a single background image behaves.
I also would like to achieve this without setting any fixed or specific positions, simply each background image dropped in respects the size of the background image next to it, butts up against it, and so on and so on.
So background images tiling across an element/container as normal, except each individual background image in the tiling can be unique.
Any ideas?
Here is how I understand your question:
I have a few image files
I want to display them side by side
I have one div and I do not want to (or can not) change the HTML I have
" Using CSS3, can
I display those images side by side as backgrounds of my div?"
If this is your question, the answer is no, not as of now. Sorry.
According to this standard specification,
http://www.w3.org/TR/2002/WD-css3-background-20020802/#properties4
there is no position value to place background images "after previous" or "floating".
More info on multiple backgrounds and background sizing:
http://www.css3.info/preview/multiple-backgrounds/
https://css-tricks.com/almanac/properties/b/background-size/
You will probably want to look into positionning your gallery, a div containing your img elements as absolute. If you place it before your div, it will appear behind the div and make one img element per image file.
<div style="position:absolute;">
<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
</div>
<div>the div to be backgrounded</div>
foreach img that you want to use in your "background", create a div, and then use the css background-image property to display the image within the borders of the div. in other words, don't put the img tags in the html, link to their source in your css.
without positioning, you will be limited to adding any "foreground" content to the divs with the background images
based on the way you worded your question, this might end up being very time consuming and frustrating for you. maybe consider a different technique with code you can understand? if you start with the basics and learn them thoroughly, the creative techniques will reveal themselves
I'm having a little problem with one of my background images in a div element. I'm using the following CSS:
.myBox
{
background-image:url('....');
background-repeat:no-repeat;
background-size:cover;
}
My background image is a picture with some people on it. Now, if I increase the width of my browser window, at a specific point, some of the people are cutted off (due to the automatic resize of the image with 'background-size:cover').
My question is: Is there any option (or jQuery plugin), to set a specific part on the background image that will be always visible on all window sizes and also fill the whole element?
There are a variety of solutions you could try; however, you might want to start with something simple like applying a background-position.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Using the background image of the group of people as an example, you might set background-position: top so that their heads never get cut off. You can also set the vertical and horizontal position in pixel or percent units.
try boostrap3 img-responsive class
.img-responsive Makes an image responsive (will scale nicely to the
parent element)
http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
http://jsfiddle.net/LFtHg/
I'm trying to create my first responsive website. For this, I'm including an image. This image has a caption which should be displayed in a transparent overlay. However because opacity settings are passed to child elements, I have removed the text from the container.
I cant get the overlay to display, at all (because it has no content inside it). I cant really add a fixed height as I want to image to respond to changes in browser size. How can I ensure this is displayed?
Thank you,
J
Edit, also what would the best way to scale the overlay as the browser resizes. I'm unsure if this approach is even possible.
First of all, you can use an RGBA background ( background: rgba(0,0,0,.5); ) instead of using opacity.
Secondly, you need explicitly set a width for your span.figcaption (you can also do that by specifying both left and right offset properties)
Perhaps this demo http://dabblet.com/gist/2778608 might also help you (image can be of any size - resize the browser window to see how everything resizes).
Adding the following rules to your existing sample effectively stretches the .figcaption elements to fully cover the .figure, fiddle:
.figure {position:relative;}
/*these could be different so that the overlay appears larger than the caption*/
span.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
p.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
You can arbitrarily adjust the values to a % setting so that the caption appears centered etc.
BTW, you know that your implementation is not yet liquid, right?