How to make all images look same - javascript

I am new to web developing, and forgive me if this is very naive question but I am facing an issue where I have a row which has 7 images basically certification that My company has. They all are different size and color and doesnt look good together.
I am trying to make them all look same size and responsive.
So far I have used:
clip: rect(0px,60px,200px,0px);
but this just cuts the images, so I need some other solution which can fix this
My first image is 250*100px whereas other is 250*250px likewise I have 7 images all different size so I have set max-width:250px; height:auto; and this is how it look now:
CSS:
.ribbon img{
height:150px;
margin: 2px 2px 2px 2px;
}
.ribbon img:hover{
border: solid 1px black;
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px black;
}
.ribbon{
vertical-align:center;
}
What I am trying to get is those first to image should come in center I have tried vertical-align:middle but doesn't work and the PCGS image is full size 250*250 so it is the problem

You could try img { height: 250px; } to makes all img with the same height, browser will handle the width onscale if you leave the width not set
Edit 1 -
If you want they have the same width, you may replace the height with width that setup the value you want, please try this example, https://jsfiddle.net/e7wv86pc/
img { width: 14%; }

You can also use css property background-size set to cover, and set the images using css background-image property like this:
.image {
width: 250px;
height: 250px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.i1 {
background-image: url("http://ia.media-imdb.com/images/M/MV5BMjE4NDMwMzc4Ml5BMl5BanBnXkFtZTcwMDg4Nzg4Mg##._V1_UY317_CR6,0,214,317_AL_.jpg");
}
.i2 {
background-image: url("http://feelgrafix.com/data_images/out/20/932835-gerard-butler.jpg");
}
<div class="image i1"></div>
<div class="image i2"></div>

Related

Vertical centring images with known height in div with variable height, allowing images to overflow div above and below

I am trying to find a method of vertical centring images in a div of uncertain height, allowing the images to overflow the div when their heigh is larger than the containing div's. The div contains a randomly selected slogan which can be of various different lengths (and of course if the browser window width is small it may make even a short slogan run over two lines).
I have shown the problem in a jsfiddle. I have tried every method of pure css that I can think of (including negative margins, pseudo elements and transforms), but they only seem to work when the height of the containing div can be guessed or known. That suggests that the only way to achieve what I want is using javascript (jquery?) to establish the height of the div and then use that to give the images either a negative or a positive margin, but I don't know how to achieve that.
<div class="slogan">
<img src="http://www.placebear.com/150/150" alt="pic 1" class="tsimg-left"> <img src="http://www.placebear.com/150/150" alt="pic 2" class="tsimg-right">SLOGAN OF VARIOUS LENGTHS, SOME ONE LINE, SOME THREE OR FOUR</div>
.slogan {
background-color: rgba(255, 100, 0, 0.3);
text-align:center;
display:block;
width:80%;
position:relative;
float:none;
padding:2em;
margin:0.5em auto 1em auto;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
border-radius: 0.8em;
z-index:6;
}
.tsimg-left, .tsimg-right, .tsimg-centre {
display:inline-block;
padding:0 1em;
height:150px;
border-radius:50%;
}
.tsimg-left {
float: left;
}
.tsimg-right {
float: right;
}
Weirdly there is a way to achieve this.
This is probably what you need:
HTML:
<div class="slogan">
<img src="http://www.placebear.com/150/150" alt="pic 1" class="tsimg-left" />
<span>SLOGAN OF VARIOUS LENGTHS, SOME ONE OR TWO LINES<br/>Slogan of various lengths
SLOGAN OF VARIOUS LENGTHS, SOME ONE OR TWO LINES<br/>Slogan of various lengths
SLOGAN OF VARIOUS LENGTHS, SOME ONE OR TWO LINES<br/>Slogan of various lengths<br/>Slogan of various lengths
SLOGAN OF VARIOUS LENGTHS, SOME ONE OR TWO LINES<br/>Slogan of various lengths</span>
<img src="http://www.placebear.com/150/150" alt="pic 2" class="tsimg-right" />
</div>
CSS:
body {
padding-top:2em;
}
.slogan {
background-color: rgba(255, 100, 0, 0.3);
text-align: center;
width: 80%;
position: relative;
margin: 2.5em auto 1em auto;
z-index: 6;
line-height: 100%;
}
.slogan img,
.slogan span {
display:inline-block;
vertical-align:middle;
}
.slogan span {
width:250px;
}
.tsimg-left, .tsimg-right {
height: 150px;
border-radius: 50%;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.tsimg-left {
left:5%;
}
.tsimg-right {
right:5%;
}
and Fiddle is here
I've changed markup order, and made all children of slogan to be displayed as inline-block elements. Another thing to do is to restrict width of your text inside the div, which I wrapped in span tag (I think this is valid html now). And finally used a vertical aligning method, utilizing absolute positioning, transforms and top property.
Let me know if this is what you are after.
PS. No JavaScript needed
EDIT: (Previous method didn't seem to work)
Use this:
.slogan {
display: flex;
background-color: silver;
text-align: center;
}
.slogan > p {
align-self: center;
color: red;
font-size: 22px;
font-weight: bold;
}
#pic1 {
display: inline-block;
align-self: center;
right: 0;
height: 100px;
border-radius: 50px;
margin: auto;
}
#pic2 {
align-self: center;
height: 150px;
border-radius: 750px;
margin: auto;
}
<div class="slogan">
<img src="http://www.placebear.com/150/150" alt="pic 1" id="pic1"></img><p>Here goes some text!</p>
<img src="http://www.placebear.com/150/150" alt="pic 2" id="pic2"></img>
</div>

Circle Mask on Non-Square Image while Maintaining Aspect Ratio using CSS/Javascript

How can we apply a circle mask to a non-square image and still maintain the original image's aspect ratio, ie. prevent the image from being squashed? The image should still fill the entire circle.
A CSS-only solution is preferred, otherwise jQuery/Javascript can be used.
JSFiddle Example: http://jsfiddle.net/vxLmrm0o/
.photo {
position: absolute;
z-index: 999;
width: 160px;
height: 160px;
background: #ccc;
border: 3px solid #fff;
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
top: 0px;
position: relative;
overflow:hidden;
text-align:center;
}
.photo-bg {
width: 100%;
padding: 40px 0 40px 0;
text-align: center;
background: #ccc;
}
Could you use a wrapper, and then set overflow:hidden? With the wrapper object being set relatively, and img absolutely, you could come up with something like:
.wrapper{
height:200px;
width:200px;
border-radius:50%;
overflow:hidden;
background: rgba(0,0,0,0.5);
text-align:center;
position:relative;
}
img {
position:absolute;
width: 400px;
top:0;
left:0;
}
<div class="wrapper">
<img src="http://media.bestofmicro.com/R/O/464964/original/Facebook-logo-PSD.jpg" class="photo" />
</div>
If that's the overall outcome you're looking for.
I've noticed in your example you've set:
width: 160px;
height: 160px;
Which is going to bring a change to your aspect ratio.
By setting only one of these values, the other will be set to 'auto', meaning it will scale to your correct aspect ratio.
example 1
but alas! This isn't right!
I see you've prefixed the border-radius property, and set it to 80px;
I would see this as a bit of overkill, since vendor prefixes for this aren't really necessary. see here
Instead, you could set it to 50%, and use the non-prefixed version:
border-radius: 50%;
But you've still got this 'rectangle' issue. So instead, you could use a wrapper to solve this:
example 2
This still has a few issues, the likes of top:0; is actually pointless since it was set on a position:relative and so bears no importance/use for this (it can only be used on other position types, for example absolute;)
finishing this off and tiding it up, you could be left with this:
DEMO
Or as my snippet shows above, you could 're write' it to this:
DEMO

How to soften/feather image edges using box-shadow in slideshow?

I have an image slider. In order to have a shoother view I want to show image edges feathered when rolling.
I have tried to use box-shadow property but it did not help me. It is possible to feather image edges using an image editor. But I do not want that.
I have added an additional <div class="insetShadow"> next to <img>.
<div class="item">
<img src="images/01.jpg" alt="" />
<div class="insetShadow"></div>
</div>
.insetShadow
{
width: 100%;
height: 100%;
top:0;
left:0;
position:relative;
box-shadow: inset 0px 0px 13px 5px #fff;
z-index: 20;
}
.carousel img
{
width: auto;
height: 300px;
max-height: 300px;
margin: 0 auto;
position: relative;
z-index: 19;
}
box-shadow is not applicable to img element when inset feature enabled.
In the up-left picture you may see the actual view and in the bottom-right desired view.
Is there any other css solution for that or any jQuery plugin?
Try using a spread radius of at least half of the blur radius:
box-shadow: inset 0 0 12px 6px #fff;
Demo
You can use this generator to mess up with the box-shadow properly. It's just CSS and attach it to the slideshow element with jQuery.
Check this and work around!

Image in placeholder html?

Can I do something like this with pure html and if needed css and javascript:
And when the mouse focuses, it becomes like this:
So I was thinking of an image placeholder. Am I on the right track, or is there a better/more simpler or more straightforward method?
EDIT: Just out of pure curiosity, how would I accomplish this using JavaScript, as all the current answers are all CSS-related?
From my knowledge this is simply CSS background image.
http://www.w3schools.com/cssref/pr_background-image.asp
Have it look there, you can accomplish this by setting its position like here: http://www.w3schools.com/cssref/pr_background-position.asp
You can also change the background image depend on if the item is focused or not simply showing the back ground image when focused and hiding it when its not like:
#item:focus{
bacground image code here
}
More details on focus here: http://www.w3schools.com/cssref/sel_focus.asp
And some focus usage example: http://www.mozilla.org/access/keyboard/snav/css_usage.html
UPDATE WITH RESOURCE - THANKS #MrMisterMan
http://developer.mozilla.org/en/CSS/background-image
http://developer.mozilla.org/en/CSS/background-position
JAVASCRIPT:
Using JavaScript add the attribute to your element like below:
This will call your function when it has focus and pass it the input element.
Also you can detect onfocusout
Hope this helps, any questions just ask :)
If you only need to support the latest Browser use this:
HTML:
<input placeholder="Google Custom Search" type="search" name="q">
CSS:
#myInput::-webkit-input-placeholder {
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-moz-placeholder {
/* Firefox 18- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-ms-input-placeholder {
/* IE 10- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
JSFiddle
Browser Support
If you need an image (google logo in the question) you should set the placeholder image as the background of the text field:
input.search {
background-image: url("placeholder.gif");
background-repeat: no-repeat;
}
input.search:focus {
background-image: none;
}
Note: :focus is a pseudo-class in css, which is activated on focus
You may use just CSS.
You can give a solid border with say 4px width.
You can make round corners foor your input using moz-border or webkit-border radius.
You can use a border background image.
here you can read about css3 borders http://www.w3schools.com/css3/css3_borders.asp
You may try
input {
border:2px solid #dadada;
border-radius:7px;
font-size:20px;
padding:5px;
}
input:focus {
outline:none;
border-color:#9ecaed;
box-shadow:0 0 10px #9ecaed;
}
Here is the working fiddle

How to draw a "smart" border in Javascript / CSS?

I mean something like this (look at the kids playing soccer tile). See how it increases the brightness of each pixel of the arbitrary picture? How do I do that with jQuery and/or CSS?
One option is to kind of fake it with a very small inset box shadow:
box-shadow: inset 0px 0px 5px 0px #ffff66;
Click here for an example.
Take a look at this: jsFiddle. Using a white-transparent border and the image starting at the same position as the border does the trick.
Try using this solution http://css-tricks.com/7423-transparent-borders-with-background-clip/ , it's not compatibile with IE, versions < 9, however.
You could use the <canvas> element to get/manipulate the image pixels, have a look here: https://developer.mozilla.org/en/html/canvas/pixel_manipulation_with_canvas
put the image in the background of a div and set a inset box-shadow.
#myDiv{
background: url(http://dummyimage.com/300/09f/fff.png) 0 0 no-repeat;
-moz-box-shadow:inset 0 0 1px #fff;
-webkit-box-shadow:inset 0 0 1px #fff;
box-shadow:inset 0 0 1px #fff;
}
With the last pixel-parameter you can control the width of the inset-border
#jason; try this solution its also work in IE8 & above http://jsfiddle.net/sandeep/Ksr86/2/
CSS:
body{background:#000}
#test {
background:url('http://cdn.natural-life.ca/mlb-wrap-ie6.jpg') no-repeat center center;
width: 350px;
height: 350px;
position:relative;
}
#test:after {
position:absolute;
background:rgba(0,0,0,0.5);
content:"";
display:block;
top:2px;
left:2px;
right:2px;
bottom:2px;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8
}

Categories