I have code something like this:
<div class='image-holder' style='width:128px; height:128px'>
<img class='thumbnail' src='image1.png'>
</div>
The actual size of .thumbnail is unknown, and can potentially be not an exact square.
So what I am trying to do is not change the dimensions of the image (.thumbnail) at all, but instead show just the center (both horizontally and vertically) of the image inside the .image-holder element.
For example, if the image (.thumbnail) was 256x256, the inner 128x128 section of the image should appear inside .image-holder.
I am open to using an actual img element, or, using background-image for the div. I have experimented with both with no success.
I am fairly certain I can write some javascript to do the work if necessary, but I was looking to see if there is a pure CSS solution before I go down that road.
You should use background-image for this. Just remove the default repeating from it, and set the background-position: center;
See it here:
.image-holder {
width:128px;
height:128px;
border: 1px solid red;
margin: 10px;
background-repeat: no-repeat;
background-position: center;
}
#holder-1 {
background-image: url('http://via.placeholder.com/350x150');
}
#holder-2 {
background-image: url('http://via.placeholder.com/100x100');
}
<div id="holder-1" class='image-holder'></div>
<div id="holder-2" class='image-holder'></div>
Related
I was trying to follow an HTML & CSS tutorial on Youtube (https://youtube.com/clip/UgkxkQMYSa9X-wsDusL62-Xe1nfFmPPNJ8WV)
His example
My example
[enter image description here][3]
I noticed a difference between the outcome of his code and mine, which is that in his example (the first image) there is horizontal spaces between the images, while my example (the second image) there is none despite the code being being identical on both the HTML and CSS files
So what seems to be the case?
EDIT
P.S.
Also the same image when I try to make it fill the container with
background-size: cover; property the image fills the container but it is not centered, any idea why?
.small-img {
border: 2px solid red;
background-image: url("https://i.stack.imgur.com/C9lng.jpg");
background-repeat: repeat;
}
<div class="small-img">
<h1>I AM SMALL IMAGE</h1>
</div>
You can define background-image size and set background-repeat to space;
In this case, styles will fill container with images and automatically added gaps between this images.
.small-img {
border: 2px solid red;
background-image: url("https://i.stack.imgur.com/C9lng.jpg");
height: 11rem;
background-size: 5rem;
background-repeat: space;
}
<div class="small-img">
<h1>I AM SMALL IMAGE</h1>
</div>
I have some HTML/CSS that I came up with, I have centered the page and attempted to get an image either side (or behind it) of the centered page but I'm not sure how.
Sorry for the bad explanation, here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/images/background.png")
}
#wrap {
width: 700px;
margin: 0 auto;
}
hr.one {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<title>ItzJavaCraft | Home</title>
<div id="wrap">
<h1 align="center">ItzJavaCraft</h1>
<hr class="one">
<p>More coming soon...</p>
</div>
</body>
</html>
I want to be able to get the background.png to the left, and the right of the page.
P.S: Sorry of I have done anything incorrect here, I am new.
Any help would be great!
Thanks,
—ItzJavaCraft
Here is a way to get one image the fullwidth and height of the screen in the background.
body {
background: url("http://placehold.it/400x300/ff66cc/ffffff&text=icon1") no-repeat center center fixed;
background-size: cover;
}
#wrap {
width: 700px;
margin: 0 auto;
}
hr.one {
margin-top: 5px;
margin-bottom: 5px;
}
<title>ItzJavaCraft | Home</title>
<div id="wrap">
<h1 align="center">ItzJavaCraft</h1>
<hr class="one">
<p>More coming soon...</p>
</div>
There's one simple error causing the background to not display: the relative URL should not start with "/" (unless, of course, you want to use an absolute path and are using a system where / refers to your root directory). Additionally, you'll need to use the background-size or background-repeat property to make the image fill up the entire page.
If you want your "wrap" element to remain white, you can just add a background-color to that element (adjusting the size of the element as necessary to get the coverage you're looking for).
The background-image property sets one or more background images for an element. The background of an element is the total size of the element, including padding and border (but not the margin). By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Tip: Always set a background-color to be used if the image is
unavailable..If you want to provide a position in a background image,
you can use some properties like:
Property:
background-position
Also, you can use a shorthand for that like jack blank code, but if this is hard to use for you, you can make it for separate like:
Full background image to your page:
background-position: cover;
Or if you want to change the position, you can use center, left, right, and top
For example:
background-position: center top;
or
background-position: left center;
or
background-position: top center;
etc.
You can learn about this property with more examples here:
http://www.w3schools.com/cssref/pr_background-image.asp
I'm using JSSOR image gallery and currently it is stretching portrait images.
I have made a css class where it is no longer stretching:
However I can't get the imace centered in the div.
<div>
<div class="portrait" u=image style="background-image: url(../img/zachry/1.jpg"> </div>
<div u="thumb"></div>
</div>
Here is the CSS?
.portrait {
position: relative;
width: 850px;
height: 565px;
background-repeat: no-repeat;
text-align: center;
}
How can I get the image centered?
You are using an image as a background from a div.
Almost any element has an attribute called: background-position which can take center as value to center the image given into the middle from the element.
so it could be something like:
.portrait {
...
background-position: center;
}
Using the following code in your CSS should work:
background-position: center;
I think of two possible ways....
div {background-position: center;}
div {margin-left:auto; margin-right:auto;}
I'm a beginner and I tried to make one page by myself, however, the result is not good. I will try to explain what I need: Full-screen page with two images, one image will cover 50% of horizontal space of browser window, and second image will be on right side covering the rest of this page. I need both images to be responsive and to always keep 100% height. When the window is resized, left and right sides of both images will be cropped.
Very similar to this: http://www.gt3themes.com/website-templates/soho/striped_landing.html
Is this difficult to make? I tried to follow some guides on the web, but the result was that my images were stretched and not cropped. Maybe I am completely wrong and I need to create two columns and then put images inside?
I will appreciate any help.
My current code is:
.photo{
size: 100%;
position: relative;
overflow: hidden;
}
.photo img{
max-width: 50%;
height: 100%;
}
The site you linked more or less did something like this:
http://jsfiddle.net/xnLn6s5o/
HTML
<div id="container">
<div id="left" class="halfwidthcontainer">
<div id="left-image" class="image"></div>
</div>
<div id="right" class="halfwidthcontainer">
<div id="right-image" class="image"></div>
</div>
</div>
CSS
html, body, #container, #left, #right, #left-image, #right-image {
height:100%;
}
.halfwidthcontainer {
float: left;
width: 50%;
}
.image {
background-size: container;
background-repeat: no-repeat;
background-position: 50% 50%;
}
#left-image {
background-color: red;
background-image: url('');
}
#right-image {
background-color: blue;
background-image: url('');
}
The general idea is that two containers sit side by side, floated (see this answer as why to use floats to position containers side by side instead of inline-block).
The idea thereafter is to explot the CSS background property which will allow you to get the overflow/positioning effects you want. You can read more about that here.
You're going to want to fill in the background-image properties of the #left-image and #right-image IDs to add the images you want.
I'm not one to usually ask, but I cannot seem to get this done using CSS/CSS3.
Note, i'll be happy even with a not-so-supported CSS3 style, like resize.
The jsFiddle for it.
The current unresizable code:
HTML:
<div id="boxes">
<a id="about1" class="aboutbox" href="/property-for-sale">
</a>
<a id="about2" class="aboutbox" href="/why-cyprus"> </a>
<a id="about3" class="aboutbox" href="/why-zantis"> </a>
<span class="stretch"> </span>
</div>
CSS:
#boxes {
padding: 70px 0 70px 0;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.aboutbox {
padding: 0;
margin: 0;
display: inline-block;
*display: inline;
zoom: 1;
width: 320px;
height: 225px;
vertical-align: top;
text-align: left;
background-size: auto auto;
}
#about1 {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about2 {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about3 {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about1:hover {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
#about2:hover {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
#about3:hover {
background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
If you resize the html panel, you'll see that they float as expected. I'm using a common method to distribute them equally along the parent div. I'm also using CSS to create a image button with hover effects (don't ask about the nature of the graphics ..).
I'd like to get these to resize accordingly when the html panel is resized; i.e. get the actual button to scale down and remain in one line.
I've got a working solution with jQuery, but spent my time getting this without it and got nowhere. Any ideas?
tia.
Aspect ratio
The main issue here is maintaining the relative dimensions of the images (the aspect ratio). A couple potential ways to do this without using JavaScript or jQuery are as follows:
Using foreground images (img tags).
Using calc() to make the height of the image wrapper be a fixed % of its width.
I didn't have much luck with calc(). The closest I got was attempting to make the height a fixed % of the viewport width (using the vw unit). It didn't seem very promising. I can't entirely rule out a solution being possible using calc(), but so far the only obvious CSS solution for maintaining the aspect ratio requires the use of foreground images.
Updated Demo
Hover state for foreground images
Achieving the hover effect using foreground images is fairly simple. Add a pair of images to each image wrapper, and apply the :hover pseudo-class to the wrapper to turn each image on or off as needed.
<a class="aboutbox" ...>
<img class="off" src="..." alt=""/>
<img class="on" src="..." alt=""/>
</a>
...
.aboutbox:hover img.off { display: none; }
.aboutbox img.on { display: none; }
.aboutbox:hover img.on { display: inline-block; }
Justifying images
The trickiest part of justifying the images is that there needs to be some whitespace between the image wrappers (in the HTML source code) for the justification to have a chance of working, for the same reason that words in a sentence need to have whitespace between them (otherwise, they'll be treated as a single word).
But whitespace between inline-block elements in the HTML source code causes 3-4px of horizontal spacing to be added between the elements (with no CSS solution available for avoiding it that's truly cross-browser and safe). That extra space, although necessary for the justification to work, is mostly likely unwanted visually and may prevent all of the images from fitting on the same line in some cases.
Here's an initial demo with a crude solution: limiting the width of each image to 31%, to allow enough room (on most screen sizes) for the whitespace between the image wrappers.
The other issue with justifying the images is that, as with text, justifying images only works if the content spans at least 2 lines. One workaround for this is to add a span tag at the end of the content with display:inline-block and width:90%. The initial demo demonstrates this.
#media queries
It's worth noting that the justification is only needed when the screen is wide enough to allow extra space between the images. #media queries can be used to only apply the justification on large screens. On small screens, the image wrappers can be floated so that there's no extra space between them.
Updated demo using #media queries
One solution is to replace the background image with an actual image. And use css to control what image is displayed, and to resize based on the containing elements. So you wrap each link in a div, which re-sizes based on your boxes container. Using css you set the image url using the content: selector.
http://jsfiddle.net/CPNbS/6/
Your resulting html looks something like:
<div id="boxes">
<div class="link" id="about1">
<a class="aboutbox" href="/property-for-sale"><img /></a>
</div>
<div class="link" id="about2">
<a class="aboutbox" href="/why-cyprus"><img /></a>
</div>
<div class="link" id="about3">
<a class="aboutbox" href="/why-zantis"><img /></a>
</div>
</div>
and the css:
.link{width:30%;height:100%;border:1px solid green;display: inline-block;
*display: inline;
zoom: 1;}
.link a{padding: 0;
margin: 0;
display:block;
width: 100%;
height:100%;
vertical-align: top;
text-align: left;
background-size: auto auto;}
.link a img{max-width:100%;}
#about1 a img{
content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about2 a img{
content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about3 a img{
content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about1:hover a img,#about2:hover a img,#about3:hover a img{
content:url("http://blogs.mathworks.com/pick/files/zebrainpastelfield.png");
}
You could also use a responsive design technique by including media queries. But this is more for different devices rather than re-sizing, so does not look as 'fluid'.
Hope this helps...
To do this with background images as you've set it up, you have to get rid of the width setting on the each item, and size the background image with background-size: 100% 100%; To maintain the height to width proportion of the .aboutboxes, use the intrinsic ratio method here with a percentage based padding-bottom. More here: http://alistapart.com/article/creating-intrinsic-ratios-for-video
.aboutbox {
position: relative;
padding-bottom: 70.3125%;
display: block;
width: auto;
height: 0;
background-size: 100% 100% !important;
}
If you'd like you can include a max-width or padding on the wrapper to limit how far they stretch.
Updated your fiddle here: http://jsfiddle.net/carasin/s4pUe/11/
Just be aware of some limited IE support of background-size: http://caniuse.com/#feat=background-img-opts
#boxes {
white-space: nowrap;
}
boxes a{
display:inline-block;
width: 33%;
background-size: cover;
}
but I'd rather use img tag see http://jsfiddle.net/Vicky_007/GZMvT/14/
and you can also emulate table:
#boxes {
display: table;
width: 100%;
table-layout:fixed;
}
#boxes a{
display:table-cell;
background-size: cover;
}