I want to set permanently video icon on image, but i can't. When i do that, two image are showing: 1. video icon 2. my image, but not adjust 1 and 2 at once one image.
More Clearly: I wants to share a photo with video icon. I have image without video logo. I wants to add video logo on image using code. I don't wants to set logo using photoshop.
HTML:
<div class="video">
<img style="height:200px" src="http://i.imgur.com/GMjqTR7.jpg"/>
</div>
CSS:
.video {
position: relative;
}
.video a {
position: absolute;
display: block;
background: url(/images/play-btn.png);
height: 100%;
width: 100%;
top: 75px;
left: 150px;
background-size: 50px 50px;
background-repeat: no-repeat;
}
Please Help Me. Thanks.
JSFiddle - Live
This can be done on the client or server side. Based on the fact that your example only contains front-end code, I'll assume you want to this on the front-end.
Take a look at watermak js
http://brianium.github.io/watermarkjs/
For a server-side example, see this answer
Add 'Watermark' to images with php
Related
I want to center an image with unknown width and height in the browser window without any resizing. If the image is wider than the browser width, which I expect it to often be, I want to crop the image rather than resize it. There should not be a horizontal scrollbar.
CSS only solutions are preferred, but PHP is acceptable and JS less desirable but still welcome. Using background images is not ideal.
This question is very similar and I would answer it if I could: Resize browser width and cover photo must retain the center of cropped image
This code block gives a sense of what I've tried, but may not be very helpful:
.banner-container {
display: block;
position: relative;
height: 450px;
overflow: hidden;
}
.banner {
position: absolute;
left: 50%;
margin-right: -50%;
transform: translateX(-50%);
/*height: 450px;*/
/*
display: table-cell;
vertical-align: middle
*/
/*justify-content: center;*/
/*margin: 0 auto;*/
/*object-fit: cover;*/
}
<div class="banner-container">
<img class="banner" src="https://i.stack.imgur.com/ppDo7.png">
</div>'
You can use an img element which I see you prefer.
This snippet uses one of the methods you tried to center it - to get the left/right centering it moves the img to have the left as the center of the div, then moves it back by half its width.
It does not try centering vertically as the requirement seems to be to have the img height the full height of the banner, but this could of course be changed if wanted.
Note that to stop overflow being shown with a scrollbar the correct setting is overflow: hidden, not hide as in the given code.
.banner-container {
display: block;
position: relative;
height: 450px;
overflow: hidden;
}
.banner {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
}
<div class="banner-container">
<img class="banner" src="https://i.stack.imgur.com/ppDo7.png">
</div>'
For clarification, this is the CSS that worked in my situation:
.banner-container {
position: relative;
height: 450px;
}
.banner {
height: 100%;
object-fit: cover;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
As described in the comment to A Haworth's answer, Imagify was replacing <img> tags with <picture>, which interferes with the style structure. Since Imagify's optimizations are used in current posting habits and the conversion to <picture> is generally desired, I avoid the conversion simply by only using .webp images for this banner.
(This is for desktop. Smaller screens get different images and have modified behavior for better performance and appearance.)
I'm building a Wordpress theme that will use imported posts from another site.
These posts have images that vary in size and aspect ratio.
There are predefined areas on the new theme where these image must fit, and fill the area, with centering and without letterboxing.
Without breaking the semantics of the img tag by using background images, I've put together a few techniques I've seen elsewhere to scale images and fit/center them to a panel, like this:
CSS:
.fillwidth {
width: 100%;
height: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.fillheight {
height: 100%;
width: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
div {
border: 1px solid black;
overflow: hidden;
position: relative;
}
JS:
<script src="http://localhost/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<script>
(function($){
$('div').each(function() {
var fillClass = ($(this).height() > $(this).width())
? 'fillheight'
: 'fillwidth';
$(this).find('img').addClass(fillClass);
});
})(window.jQuery);
</script>
HTML:
<div>
<img src="test.jpg" />
</div>
So basically the JS determines the aspect ratio, the image is fit to the box and a transform centers it.
Now my question is, on a high traffic Wordpress site, would you recommend allowing the user's browser to do this resizing on the front end, or should the theme create multiple versions of uploaded images to fit the various panels on the site in advance? With modern browsers what is the impact of asking the browser to do the scaling and resizing of images?
Im a beginner when it comes to building a site. Thats why i choosed to build with Wordpress.
The thing is that i got i responsive theme that should work with any browser.
I upload a logo by going to appearance>Customize>upload logo.
With Crome it looks great:
But with firefox, Iphone safari and IE it looks bad:
http://imagizer.imageshack.us/v2/800x600q90/838/8tl2.png
I've a Childtheme, and the only code i've put in is to get the logo to display a bit more towards the middle:
#import url("../realia/style.css");
.logo-wrapper { position: relative; left: 10%; }
Why is it looking like this, ive tried with .clearfix codes and to change the image height etc.
Have a great day and thank you in advance!
Just remove the height from your,
.logo class
Height is causing issue on Chrome as well, while resizing the window. Image is not able to resize. So, remove the height in px.
Good luck!
I have just checked your theme out, and noticed this class:
#header-wrapper #header #header-inner .navbar .navbar-inner .logo {
float: left;
height: 90px;
line-height: 90px;
margin: 0;
}
Remove the height: 90px and it should look good in all browsers!
Remove float: left from the logo.
e.g:
#header-wrapper #header #header-inner .navbar .navbar-inner .logo {
height: 90px;
line-height: 90px;
margin: 0;
}
I have recently faced this issue when my logo was not showing up properly in internet explorer, try with this code hope this will work.
max-height: 100% !important;
I need to fit and crop the image into it's wrapper.
<div class="box desktop-3 tablet-3 tablet-ls-3 mobile-3">
<div class="inner-box fullbox">
<a href='#module'>
<div class="image-wrap" >
<img src="../img/placeholder.png" />
</div>
</a>
</div>
</div>
css
.box {
width: 282px;
min-height: 282px;
padding: 10px;
float: left;
}
.inner-box {
width: 100%;
min-height: 282px;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
padding: 20px;
}
.fullbox {
padding: 0px;
}
.image-wrap {
...
}
i've tried to put the image as the background like you see below, but that didn't worked for me. I want to have a image section from the image that it fits into the box.
.image-warpper {
background-image: url(...);
background-repeat: no-repeat;
background-size: contain;
}
Do i have to crop the image via php or is it possible to scale or crop it in css?
Thanks
"Do i have to crop the image via php..."
Depending on the Image file-size its strongly recommendable to use PHP for this purpose.
Remember the clients browser will always load the complete image to resize it to the css given values.
So even if you got a style telling the image shall never exceed 100x100px the client's browser will load the full size image.
That could take "very long" if its a giant image (referring to the file size).
There are pretty nice classes/libs you can use with PHP to get a comfortable and easy way to play with images. And your page will be much faster then.
For example i recently found:
http://wideimage.sourceforge.net/
Super sweet thing. Supports chaining and stuff.
You should be able to do this:
.image-wrap img { max-width:100%; height:auto; }
This will constrain, and scale down the image, and set it to be 100% wide, according to however wide the parent element is.
Having in mind that you'll use an img html tag, make the image wrap div in position:relative and overflow:hidden and the image with position:absolute and height:100%, width:auto (or width:100% and height:auto). This way the image will be cropped in the parent container and keep its ratio.
See this demo and resize the frame to see how the image is cropped and resized in various dimensions.
Ok, so I'm trying to implement a sliding video thumb gallery linked to a lightbox similar to the home page of reason.com but I would like to do it in pure CSS if possible. I already have the code complete for the lightbox which is basically pure CSS with a javascript:void function linking thumbs to the lightbox.
My issue is that I plan on updating the videos daily since it is for an article database and would rather not have to capture the video thumbs for every video upon updating.
Is there a way to dynamically capture thumbs of videos with a PHP script and including the script in my javascript:void link that will display the thumb for my lightbox? I'm basically trying to find a work around for capturing and resizing the thumbs for all of the videos in my thumb slider because this would be increasingly teadious to do on a daily basis.
Thanks in advance for any suggestions!
CSS:
.black_alpha{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.video {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
HTML:
<body>
**I want each thumb to link to this** <a href = "javascript:void(0)" onclick =
"document.getElementById('light').style.display='block'document.getElementById
('fade').style.display='block'">
<div id="light" class="video"> **this should show the video of the thumb clicked**
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'"></div>
<div id="fade" class="black_alpha"></div>
</body>
I thought the thumb slider would have been irrelevant so I didn't include it.
You can use ffmpeg to capture images from video. It's easy to use and just needs to be installed on your server. You can run the ffmpeg commands from php using exec() (note: this may need to be enabled in your php.ini)