I'm looking to position images over top of a div which has a set background. I'm using CSS to style the div as well as the images sitting on top of the background but I'm not seeing the results that I'd expect. The images which are sitting on top of the div's background image does not adjust based on my pixel settings.
Here's my HTML:
<div class="colorpicker" id="colorpicker">
<img src="images/color_unselected.png" class="unselected" />
<img src="images/color_C.png" class="c_image" />
<img src="images/color_K.png" class="k_image" />
<img src="images/color_M.png" class="m_image" />
<img src="images/color_Y.png" class="y_image" />
</div>
Here's my CSS:
#colorpicker{
border: 0px;
width: 63;
height: 342;
position: relative;
margin: 0px auto;
margin-left: 1002px;
background-image: url(images/color_tab_container.png);
background-repeat: no-repeat;
}
#colorpicker.unselected{
top: 50px;
right: 25px;
}
I can't make up from your question how exactly you want to position those four images, but I would make a selector for your images and not the parent div:
html:
<div class="colorpicker" id="colorpicker">
<img src="images/color_unselected.png" class="unselected">
<img src="images/color_C.png" id="c_image" class="image" />
<img src="images/color_K.png" id="k_image" class="image" />
<img src="images/color_M.png" id="m_image" class="image" />
<img src="images/color_Y.png" id="y_image" class="image" />
</div>
css:
img.image {
/*whatever you want to do here*/
}
#colorpicker {
border: 0px;
width: 63;
height: 342;
position: relative;
margin: 0px auto;
margin-left: 1002px;
background-image: url(images/color_tab_container.png);
background-repeat: no-repeat;
}
#colorpicker.unselected{ top: 50px; right: 25px; }
Sidenote: you can just type/copy-paste the code here, select in and press the above 'code sample' button. This will display it correctly as you see above (make sure you do this for html and css separately) :-)
To get the images to "stack", with a margin between then, add the following CSS:
#colorpicker img {
display: block;
margin-bottom: 2px;
}
See http://jsfiddle.net/KX5mS/ for a working example.
Related
I have 3 different box sizes in which I need to display an image. The image should take the entire width and height of the box but should not stretch. It can crop and center the image.
Here is an example:
https://jsfiddle.net/y1zn0mxy/
If you see the 3 different size, you will see that it works in the first and second case but not in the last one. It would work in the last one if i swap the size of the image tag to:
width: 100%;
height: auto;
but then it will not work in the first two.
Any other way to achieve this?
You can simply achieve the desired effect by inserting your image as background image instead of an <img /> tag. The advantage is, you don't need the image tags and the CSS applied to them. Just use background-size: cover; to always fit the image into the viewport. This way you have much less code and can control the image by the CSS background property.
.img {
background-image: url(http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
<div style="width:300px; height:250px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;"></div>
</div>
<div style="width:300px; height:500px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;"></div>
</div>
<div style="width:500px; height:200px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;"></div>
</div>
Create a new class for the last image (I called it landscape2 in my jsfiddle) as the last image is the only one with width value higher than the height value. Then add this:
.landscape2 {
width:100%;
}
https://jsfiddle.net/y1zn0mxy/2/
It's normal behaviour. It's normal behaviour. You can't set both axis to 100% because your image will be stretched. Why not add additional class for horizontal landscape: https://jsfiddle.net/y1zn0mxy/1/ ?
If you don't need <img ... /> you can replace it by css properties:
background
background-position
background-size: cover
Here you can see reproduce: https://jsfiddle.net/y1zn0mxy/3/
Besides Andreas good answer, you have a new way to handle this.
Just can achieve just the same functionatily of backgroound-size: cover in an image using object-fit.
It isn't as widely suported (no suport in IE/Edge) but there is a polyfill available
img {
position: absolute;
top: -100%;
right: -100%;
bottom: -100%;
left: -100%;
margin: auto;
width: 100%;
height: 100%;
object-fit: cover;
}
.box {
position: relative;
overflow: hidden;
}
<div style="width:300px; height:250px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;">
<img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" />
</div>
</div>
<div style="width:300px; height:500px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;">
<img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" />
</div>
</div>
<div style="width:500px; height:200px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;">
<img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" />
</div>
</div>
I have referred this question but it dint help me out . I am trying to change span tags height and width inside image tag but it's not working and this is my code:
html
<img class="profile_pic" alt="Sumanth Jois" src="file/someimage">
<span class="changePicture">HelloThere</span>
</img>
Css
//There are many spans so I am using the . operator to specify
span.changePicture{
width: 100px;
height:200px;
background-color:red;
margin-left: -150px;
color: white;
margin-top: -20px;
}
I am not able to change the width and height using this code.Can I know how I can solve this?
ThankYou
First, span is a single line element. So no height.
Second, image is not : <img> </img>
Image tag is a single tag <img />
Try using a div instead of the span. And may be add span within it.
span is by default an inline element which cannot take width and height properties but you may use display: block; or display: inline-block; to set height/width to it.
Snippet to overlay span over image :
div {
top: 10px;
left: 20px;
position: absolute;
color: #FFF;
}
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="image" />
<div>
<H1>Text </H1>
</div>
First of all the way you use img tag was wrong the html must be like this:
<img class="profile_pic" alt="Sumanth Jois" src="file/someimage" />
<span class="changePicture">HelloThere</span>
and just add display:block; to css to set height and width
span.changePicture{
width: 100px;
height:200px;
background-color:red;
margin-left: -150px;
color: white;
margin-top: -20px;
display:block; /*added*/
}
EDITED:
To do that you need to put the image into div like this one:
<div class="container">
<div class="background-img">
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT_1tKSY61_ZLpmpR0PWO784otZulHIMgrNLECJ-Te8HwvqoXMJZv8GYDo" alt="Generic placeholder image">
<div class="overlay">
<span>Text</span>
</div>
</div>
</div>
Here is the css:
.background-img .overlay{
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.background-img .overlay {
opacity: 1;
width: 100%;
height: 100%;
background-color: rgba(255, 51, 51, 0.5);
}
.container{position:relative;
max-width:300px;
}
.container img{width:100%;
display:block;
}
Here is the jsfiddle:
DEMO
I want to create the following layout :
Is a stripe of a variable number of images that have various widths and heights, that are:
proportional
scaled at the same height;
and the sum of their widths are equal to the parent width.
***It's kind of complicated to express myself;
I was wondering if it's possible for a block to simulate the img neat proportion behavior when you set a width to a percentage and it calculates the height of it automagically.
I've made up a diagram that maybe explain better what I want to achieve :
I want for the image to have collectively 100% width of the parent element, scaled with at the same height without loosing their proportion.
I've tried various implementations trying to figure out a way in which I can translate compute a percentage height in css that fills all the width for a block, just how the image behaves when there are {width: 100%; height : auto} properties.
So here is what I've got so far :
Strike #1, tried a simple solution
Problem: container height must be predefined.
.container {
width : 100%;
border: 1px solid black;
height: 50px; /* I would like to say here auto */
}
.image-wrapper {
white-space: nowrap;
height: 100%;
max-width: 100%;
border: 1px dashed gray;
}
.image {
height: 100%;
width: auto;
}
<div class="container">
<div class="image-wrapper">
<img class="image" src="http://placehold.it/100x200" />
<img class="image" src="http://placehold.it/300x200" />
<img class="image" src="http://placehold.it/800x400" />
<img class="image" src="http://placehold.it/10x80" />
<img class="image" src="http://placehold.it/800x400" />
</div>
</div>
Strike #2, display: table anyone ?
Problem: Don't even need to mention it, images are cropped the container size doesn't follow its parent size .
.container-wrapper {
width: 40px;
height: 50px;
}
.container {
width : 100%;
border: 1px solid black;
display: table;
height: 100%;
}
.image-wrapper {
display: table-row;
height: 100%;
border: 1px dashed gray;
}
.item {
display: table-cell;
border: 1px solid blue;
width: 100%;
height: auto;
}
.image {
height: 100%;
width: auto;
}
<div class="container-wrapper">
<div class="container">
<div class="image-wrapper">
<div class="item">
<img class="image" src="http://placehold.it/100x200" />
</div>
<div class="item">
<img class="image" src="http://placehold.it/300x200" />
</div>
<div class="item">
<img class="image" src="http://placehold.it/800x400" />
</div>
<div class="item">
<img class="image" src="http://placehold.it/10x80" />
</div>
<div class="item">
<img class="image" src="http://placehold.it/800x400" />
</div>
</div>
</div>
</div>
***I must say that I am looking for a HTML/CSS solution without the involvement of JavaScript code.
Do you have a clue on how can I approach this ?
So a trick I just came up with is to use the automagic scaling of an image to scale the containing filmstrip div, but hide it with opacity (in a real example, I'd use a transparent .png as well). This sets the height of the filmstrip relative to its width. If you want your filmstrip to be 5:4 or 16:9 or whatever, just change the proportions of the .magic image.
The container inside is then set to be absolutely positioned so it inherits the size of the .magic image.
The images themselves are set to take up the full height of the filmstrip, and are given different widths. The actual image is set with background-image which uses background-size: cover and background-position: center to fill the div.
.filmstrip {
width: 100%;
position: relative;
/* just to make it easier to see what's going on */
border: 1px solid red;
}
.magic {
width: 100%;
height: auto;
display: block;
/* we don't actually want to see this, we're just using it for it's ratio */
opacity: 0;
}
.contents {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
.contents .image {
height: 100%;
background-size: cover;
background-position: center;
float: left;
margin-right: 2%;
/* just to make it easier to see what's going on */
border: 1px solid blue;
box-sizing: border-box;
}
.contents .wide {
width: 30%;
}
.contents .narrow {
width: 10%
}
<div class="filmstrip">
<img class="magic" src="http://placehold.it/400x100" />
<div class="contents">
<div class="wide image" style="background-image: url('http://placehold.it/300x100');"></div>
<div class="narrow image" style="background-image: url('http://placehold.it/300x100');"></div>
<div class="wide image" style="background-image: url('http://placehold.it/300x100');"></div>
</div>
</div>
Browser support should be: Chrome 3+, Firefox 3.6+, IE 9+, Opera 10+, Safari 4.1+ which is basically because of the use of background-cover.
Have a look at my stackoverflow 33117027 answer in which I made suggestions about creating a filmstrip. It has a reference to an eleborate Codepen example. You can easily strip/add what you need...
i have 4 social media buttons in a div and i want to space them equally but i can't figure out how to?
CSS
.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}
HTML
<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<img src="Images/facebooksmall.png" />
<img src="Images/twittersmall.png" />
<img src="Images/googlesmall.png" />
<img src="Images/linkedinsmall.png" />
</div>
</div>
</div>
I would place a div around the images and place the height of the divs to 25%.
HTML
<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<div class="social_btn">
<img src="Images/facebooksmall.png"/>
</div>
<div class="social_btn">
<img src="Images/twittersmall.png"/>
</div>
<div class="social_btn">
<img src="Images/googlesmall.png"/>
</div>
<div class="social_btn">
<img src="Images/linkedinsmall.png"/>
</div>
</div>
</div>
</div>
CSS
.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}
.social_btn {
height: 25%;
}
If your container div is a fixed width here's what I usually do, assuming 48x48 icons:
HTML
<div id="social">
<img id="twitter" />
<img id="facebook" />
<img id="linkedin" />
</div>
CSS
#social {
width: 154px;
height: 48px;
}
#social img {
width: 48px;
height: 48px;
float: left;
margin-right: 5px;
background-image: url('icons.png');
background-position: 0px 0px;
}
#social img:last-child{
margin-right: 0px;
}
#social img#twitter {
background-position: -48px 0px;
}
#social img#facebook {
background-position: -96px 0px;
}
Then make a PNG file with just the icons without any padding
I only can think of the use of padding:
HTML:
<div>
<img class="imagePadding" src="Images/twittersmall.png"/>
<img class="imagePadding" src="Images/twittersmall.png"/>
<img class="imagePadding" src="Images/googlesmall.png"/>
<img class="imagePadding" src="Images/linkedinsmall.png"/>
</div>
CSS:
.imagePadding
{
padding: 10px;
}
For vertically centering the block please check the following fiddle http://jsfiddle.net/L4su9/3/
.socialbuttonstop
{
height: 150px;
width: 35px;
position: absolute;
top:50%;
margin:-75px 0 0 0;
/* negate top pixels =-"total height/2" */
background:#000;
}
Semantically you should have the HTML set up using an unordered list:
<ul>
<li class="facebook"><span>Facebook</span></li>
<li class="linkedin"><a href="#"><span>Linked In</span></li>
</ul>
CSS:
ul {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
display: block;
}
ul li {
display: block;
width: 35px;
height: 35px;
}
ul li a {
display: block;
background-image: url(facebookSmall.png) no-repeat center;
}
ul li a span {
display: none;
}
Quick explanation. Basically the unordered list tells the browser or someone who is blind that it is a list - which it is. It is a list of social media buttons.
The anchors allows the user to click and go to your Facebook/Linked In page while the span tags enable you to provide helpful text to Google/search engines and those who are blind.
Of course, you CAN still you use the original HTML code that you have but then you should at the least apply alt attributes to the images and consider linking them with parent anchors.
I think this is more than enough information to get you started. I don't think it's fair for me (or anyone else) to give you the complete code. That's the beauty of coding! Problem solving.
I´m trying to place a slided image in the center if the page. I have it almost done, the thing is that inner each piece of the image I have a small space, like if it has some little padding (which it hasn't), does anybody sees something wrong in the code?
<style type="text/css">
html, body, #wrapper, images {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #000;
}
img {
margin: 0px;
padding: 0px;
border: 0px;
}
.center {
width: 800px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -300px;
}
.center_mini {
margin: 0px;
padding: 0px;
border: 0px;
}
.center_mini_float {
float: left;
margin: 0px;
padding: 0px;
border: 0px;
}
</style>
<div class="center">
<div class="center_mini">
<img src="images/background_01.png" width="800" height="144" alt="bg">
<div class="center_mini">
<div class="center_mini_float">
<img src="images/background_02.png" width="503" height="456" alt="bg">
</div>
<div class="center_mini_float">
<div class="center_mini">
<div class="center_mini">
<img src="images/background_03.png" width="246" height="89" alt="bg">
</div>
<div class="center_mini">
<img src="images/background_05.png" width="246" height="106" alt="bg">
</div>
<div class="center_mini">
<img src="images/background_06.png" width="246" height="102" alt="bg">
</div>
<div class="center_mini">
<img src="images/background_07.png" width="246" height="159" alt="bg">
</div>
</div>
</div>
<div class="center_mini_float">
<img src="images/background_04.png" width="51" height="456" alt="bg">
</div>
</div>
</div>
<!--<img src="images/background.jpg" width="800" height="600" alt="bg">-->
</div>
Try adding:
img { display: block; }
The problem is that IMG tags have a natural DISPLAY value of "INLINE". This causes extra whitespace to appear around the image in certain situations.
Depending on your layout needs, try
img { display: block; }
or
img { display:inline-block; }
If your images are otherwise working the way you want, inline-block will cause the least amount of thrash.
More info:
http://www.w3schools.com/cssref/pr_class_display.asp
http://www.tequilafish.com/2009/04/29/css-removing-extra-space-underneath-an-image/
I think the better solution will be using
img { vertical-align: middle; }
This way you won't alternate the default browser image display. Also, make sure the image container has line-height: 100%, that could be causing problems too.
Images have display:inline; by default, that's what's causing the whitespace between your images. You can do three things to prevent this:
float:left;
or
display:inline-block;
or
display:block;