I want to display images in a 144px x 144px div element.
Images are always larger than 144px and so I want to zoom scale them. By that I mean that the smallest side will touch the edge of the div, cutting a bit from the other side - the opposite of letterbox.
How can I do this and have it work on older browsers like IE as well?
EDIT:
Changed the image, the first was wrong, sorry.
Resize the image so that inside the div there is no space without image
My first answer addressed intentionally blocking out the part of the image while intentionally keeping the space occupied. If you just want part of the image visible with no space or anything else taken up, the best option will be to use CSS Sprite techniques.
Here's an example:
HTML (copy and paste into your own file for a full test):
<html>
<head>
<style type="text/css">
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
height: 100px;
width: 235px;
}
</style>
</head>
<body>
<div class='clippedImg'> </div>
</body>
</html>
CSS (this is really the key):
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
}
You can adjust the position numbers to get exactly the portion and size of the image that you want.
Note also that if you want a black box around this, it's even easier than the other post I made. Just put a parent div around this one:
<div class='blackBox'>
<div class='clippedImg'> </div>
<div>
With a padding and width set to create the black-box effect you want:
.blackBox {
background-color: black;
padding: 0 20px;
width: 235px;
}
Set only the width of the image to 144px in CSS or in the attribute. The height will scale automatically. I'm fairly certain this works as low as IE 6. I'm not certain about anything older than that.
If I read your question right, you aren't trying to resize the image, but rather to actually cut off part of the image. If you just want to resize the image, then follow the other answers about that.
The simplest way I can think of to actually cut off the image this is to add <div class='blockOut'> </div> and then use CSS to place & size the div, make it's color match the background color of your page, and put it in front of the image. Example CSS:
.blockOut {
position: relative;
top: -100px;
left: 100px;
background-color: white;
z-index: 2; //this is the important part for putting this div in front of the other one
}
Edit: Note that since you added an example showing that you want all sides blacked out, this would require separate divs for blacking out the top, each side, and the bottom. Also, if you want part of the image to show through (as it does in your example) you can use CSS transparency options.
div{height:114px;width:114px;overflow:hidden;}
div img{position:relative;left:-100px /*or whatever you want. can change it with js*/;top:-100px;}
that is masking to only show a part of the img, as you say in the title. but in the description says you want to resize the img. decide yuorself
to do what you want with css, you should use max-height:144px;max-width:144px. but ie6 doesn't implements those simple properties, so you'll have to use js
Related
if you could take a look for a moment at http://www.acehbus.com, you could see that the screenshot image of iPhone is fully seen in the screen. I want to know how to make the half of the image overlays the next div like in the http://sociali.st. I have tried z-index but it doesn't work. Thanks you for your help.
I got through your site, and I have two things:
1) dont use images with resolution of 649x1323. Half of that size will ok .. there are many of images of this phone, and people with slower connection will die on this. And it is still used only as smaller thumbs, so large resolutions are really not necessary.
2) You use the image as itself. Use div instead and give image as its background. See this fiddle:
https://jsfiddle.net/8xhucpx8/
div.image{
width:300px;
height:200px;
background-image:url('http://www.acehbus.com/img/search.png');
background-position:top center;
background-size:100% auto;
background-repeat:no-repeat;}
You can do that using overflow: hidden first give a fixed height to the parent element of the image in your case col-md-6. So do something like.
.col-md-6 {
height: 155px;
overflow: hidden;
}
<div class="col-md-6">
<img src="http://www.acehbus.com/img/search.png" alt="" width="200px" />
</div>
First of all, you may always inspect a site with effect you want to achieve and try to apply it's approach in your project. The markup and styles are at direct access. If you noticed in the example you've provided the overlapping effect is achieved with combination of negative margins and absolute positioning. So if you play with these properties you gonna make it. I would go for something like this:
<div class="iphone"></div>
.iphone {
bottom: -100px;
position: relative;
}
Look, I made some experiments and made this fiddle
I have this CSS code which generates transparent div:
.camera_caption {
position: relative;
background: url(../images/capture_bg1.png) 0 0 repeat-x;
left: 0;
margin-top: 263px;
width: 717px;
height: 234px;
padding-left: 365px;
font: normal 14px/24px 'Roboto';
color: #fff;
}
As you can see the background is generated using this image:
But I have several problems with this solution:
I would like to use pure CSS code to display colorful background.
And also I would like to resize the background height according to content size. For example I have several lines of text in different languages. I need to dynamically to resize the background layer .camera_caption.
Can you propose me some solution of the problems?
I am not user as to what exactly your issue is and what is it that you want to get done.
But for auto resize you can remove the width and height given. Maybe you can have 100% width if that will be more appealing
width:100%;
If by any chance you need to have a minimum height and width you can get it done like this
min-height:500px;
min-width:500px;
Add background color with this code
background:blue;
If you can elaborate or better post a fiddle, we can help better.
If you want to use pure css, an online tool you may want to consider is http://duri.me/, which converts an uploaded image into base-64 encoding that you then include in your css class definition. The end result looks like the example below. Doing this, you don't need an image, because the value of the background-image:url(data:...) property is the image. In your case, simply create your colorful background in an image editor, upload it, and grab the generated code.
There are goods and bads to this. On the bright side, you don't have to worry about a missing image, but you're adding a lot of code (especially if it's a large image), and the "image" never gets cached. You may also have to use a bit of javascript to dynamically resize the background, or, you can look into using the css property background-resize to scale it appropriately.
.myImg {
width: 60px;
height: 60px;
background-repeat: no-repeat;
background-image: url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/wAALCAA8ADwBAREA/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/9oACAEBAAA/APn+iiiiiiiiiiiiiiiirWm6beavqENjYW73FzM21I0HJP8AQe54Fadz4O16G4aKDSr67QMEE1vayPG7Yz8pA59j3HPSqsvhzXIXCS6NqCOSyhWtXBJVdzDGOoXk+g5qEaPqZXcNOuyvkrPnyGx5bHCv0+6TwD0JrV1DwRr2m6CusXOn3EVsH8qZZYzHJC/UblbBwQQQw4P1rnaKK9E0Sa3+HNxpt1fZXW7spLMvlCRrG0PJG1uPNkX1+6p9W40NU+NE9/c2skejpGtrqv8AaCZuDlwGyEb5fQKMj06VFa/GOWCys7OTw/ayw2rSOpM7h2aRJFlLN/teaT7YHWorf4tfYBDJp+gQQ3MFgunxSvcvIFiSQSR5UjBKkde9XoPixpVzYa1a6h4dUw6kySzRG5klWR9xEm0scxkqQVxkKUHHORwfifw//YV5DJbTfatLvY/PsLsDAlj9D6Op+Vl7EfSsOum8MXWlaAw13UoUv7qI5sdPb7jSD/lpL6Ip6L1Y+gGaydb1q+8QatcanqMokuZ3LuQoUc+gHSs+iiiux0bxbb3Hh1vCviKLzNLZzJa3caAzWMvTeP76HoynnHQ8AVyl1bm1upIDJHJsOA8bZVh2IPoahooooooooooooooooooooooor//Z)
}
I'm using a YouTube picture below one for example :
and Bootstrap to display it:
<img src="{{img}}" alt="{{title}}" class="img-circle" width="60px" height="60px">
But the picture is crushed:
Am I missing a bootstrap property ? or a common hack ? Thanks !
Edit :
I finally found a trick to do the job :
<div class="crop">
<img src="https://i.ytimg.com/vi/EONhJ9qvCPY/default.jpg" alt="#" >
</div>
And
.crop{
width: 60px;
height: 60px;
overflow:hidden;
position:relative;
border-radius: 50%;
}
.crop img {
position: absolute;
left: -27px;
top: -18px;
}
What do you mean by picture is crushed? You're against the picture being in a circle, or the way it displays in the circle?
I think first of all it's crucial to understand, bootstrap as in whole is a framework containing rules for html, css & javascript. So to answer your question, there is no property/hack orso you're missing.
The reason why it displays like it displays, is because the image does not properly fit into the 60x60 image (or rather the crop of it in the circle) therefore, it crops out the parts that do not fit.
What I'm saying is, although it may not visually look like it, it still takes the 60x60 block and just puts a circle inside it and renders the outskirts transparent. There is virtually no way to avoid this, other than resizing the original picture.
So either
a) Edit the original picture in mspaint/photoshop/gimp whatever so it will fit better inside the circle crop
b) Go inside the bootstrap CSS properties and change the width and height properties of the img. Alternatively set a max-width and max-height for the images so it will not be stuck inside the 60x60 definition.
img {
width: value;
height: value;
}
The reason why you'd want to do it like that, is because in case you will want to use such an image in future, you will not have to specify the width and height properties through HTML code (which is causing you unnecessary displaying issues and code-readability problems to begin with), but it will automatically apply it to every element using the CSS rules.
I have a problem I'd like some help with. Thankfully my code can be flexible, so I'll just give some generic markup.
My major limitation (due to the way I am retrieving the information from a database) is that the images CANNOT be background images, otherwise this would be easy.
I simply want an image to change when I hover over it. I have made an image twice as high as I need it - half colour, half black and white. The idea is, the image is exactly the same (a person) - but when you hover over it - you see the colour version.
I have constructed my 'hover' image 200 pixels wide, and 400 pixels high. It is marked up very simply:
<div class='staff_profile'>
<h3>Staff Title</h3>
<div class='staff_image'>
<img src='.....' alt='....' />
</div>
</div>
So I am figuring I need something like:
.staff_image {
float: left;
height: 200px;
width: 200px;
}
The trouble is - using this, the 400px high image displays by default in the centre of that staff_image div - so I see half the black and white photo, and half the colour.
I am going to be using jQuery to do the hover - so just need some CSS tips on what properties I need to use to:
Have the image display at the very top
Have the image display from halfway down
Everything I try with padding and margin seems to push all content down, and doesn't move the actual picture inside at all. I basically need to know how to maneuver an image that is too tall for a fixed height div around WITHIN that div. And none of the answers I can find here seem to help. There are lots of them on centering an image - but centering is NOT what I want to do - it's the opposite! :)
Thanks for any help.
Here you go: http://jsfiddle.net/xqxSK/
<div class='staff_profile'>
<h3>Staff Title</h3>
<div class='staff_image'>
<img src='http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6' />
</div>
</div>
.staff_image {
overflow: hidden;
height: 200px;
}
.staff_image img {
position: relative;
}
.staff_image:hover img {
top: -200px;
}
I'm using CSS instead of jquery for the hover. This is a better approach, since it works better on touchscreen devices.
I want to make a header like http://www.chacha.com (doesn't move, is about that wide and that height, and able to fit divs inside it and also has to be an image)
I am starting off with a blank html document and a blank css page, so there I haven't currently written any code.
I've been trying two days straight to do this now so I would really appreciate any help anyone can provide.
I have gimp so if anyone could also give me image dimensions for a perfect header and perfect background size I would appreciate it even more.
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: url(yourimage.png) repeat-x;
}
<!--html -->
<div id="header"></div>
That should give you a starting place, I can't tell you more without seeing exactly what the layout's supposed to be.
The CSS property you're looking for is position: fixed which will position the element relative to the viewport. This is good breakdown of positioning: https://developer.mozilla.org/en-US/docs/CSS/position
In this specific case, what you've got is an element with styles roughly along these lines:
#header_id {
position: fixed;
width: 100%;
height: 35px;
}
You don't have to set the height, but unless there is content in the fixed element, it will collapse if there is no height specified. They also appear to have put a drop-shadow on the element toget the neat floating effect.
If you want to have an image inside, you can just put the <img> inside the header element, or use it as the background-image url in the CSS and position it with background-position (see also: https://developer.mozilla.org/en-US/docs/CSS/background-position although the compatability table at the bottom is important if you want to do anything too specific with this property).
You can do this with any block-level element (or any element with display:block set on it). In your example they are using the HTML5 <header> tag; a <div> would work, too, if <header> wasn't appropriate for your page.
I would recommend using the Firebug addon with Firefox (or similar developer consoles with other modern browsers) -- you can right click on an element on the page and select 'Inspect element' from the dropdown menu and get a breakdown of both the markup and styling to see how other websites are constructed. Very useful for when you're browsing the internet and you see something and think, 'that's a neat trick, how does it work?'
FOR FULL WIDTH FIXED HEADER
header {
width:100%;
background:green;
height:60px;
margin:-8px;
position:fixed;
}
FOR NONFULL WIDTH FIXED HEADER
Create a div and set width and height (you can also set it left or right by float:left, float:right)
then in this div put the code above but without margin:-8px; and change the width to the width that your div has.
Here is a test