Forgive me if this question has been asked before, but I always pull together random hacks for images and want to know a definitive way to do what I'm seeking. Here's the HTML:
<div class="track-artwork">
<img src="<?php echo $chart_track->image; ?>" class="background-image">
<audio>
<source src="" type="audio/mp4" />
<source src="" type="audio/aac" />
</audio>
</div>
</div>
The image I'm linking to is 111px X 111px. It needs to be smaller to fit into the track-artwork div and be fully displayed. I do not have the ability to edit the asset's size with something like photoshop. I want to make it so the image acts as a "background" of sorts, sized to fit the "track-artwork" div with 5px of margin on either size. Here's the CSS I've toyed with to achieve this:
.track-artwork {
cursor: pointer;
display: inline-block;
height: 100%;
margin: 0;
position: relative;
vertical-align: top;
width: 20%;
}
.background-image {
position: absolute;
z-index: 0;
width: 100%;
top: 0;
left: 0;
}
Unfortunately, this isn't working out. The width seems to be sized properly, but the height isn't working -- it seems to stay 111px no matter what I input. I've tried it with hard pixel values, but it doesn't change. Thoughts?
I would set the image to the div background and use either contain or cover as the background-size.
.track-artwork {
cursor: pointer;
display: inline-block;
height: 100%;
margin: 0;
position: relative;
vertical-align: top;
width: 20%;
background-size: cover; // or background-size: contain;
}
Cover will fill the entire div with the background image, cutting off part of the image if the ratios aren't the same.
Contain will resize the image to be fully visible within the div.
You'll have to set the background-image url to the correct image location using php.
You can do this with the CSS3 background-size property.
PHP
<div class="track-artwork" style="background-image:url(<?php echo $chart_track->image; ?>);">
<audio>
<source src="" type="audio/mp4" />
<source src="" type="audio/aac" />
</audio>
</div>
CSS
.track-artwork {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
IE8 Polyfill
If you need to support IE8, there is a Polyfill. You can get it, and information on how to use it at: https://github.com/louisremi/background-size-polyfill
Related
I have uploaded two videos to the database and Its being displayed on my website. I am trying to make them the same shape and height. The width is fine, but one of them is shaped like a square and the height is longer while the other is rectangle and the height is shorter and I know its because of the way video was taken, one was taken vertically and the other horizontally. How do I get them to be the same shape and height. Can you help me please?
I tried this
<video class="video1" id="cb" preload="auto" video="src="{{$proo->video}}#t=1"" style=" height:80%; max-height:20em; width:100%; max-width:20em; object-fit: cover;
float:left; clear:both;
padding-left:2%; margin-top:0px; cursor:pointer; "><source="video1.jpg" playsinline alt="Video Unavailable" id="" ></source>
</video>
this the javascript part to handle the onclick,onmouseleave
$(document).on('mouseover touchstart', 'video', function() {
$(this).get(0).play();
this.muted=true;
});
//pause video on mouse leave
$(document).on('mouseleave', 'video', function() {
this.currentTime = 1;
$(this).get(0).pause();
});
$(document).on('click touchstart', 'video', function() {
$(this).get(0).play();
this.muted=false;
this.currentTime = 0;
});
This a little something i came up with when i need to output YouTube videos in iframes and its very responsive meaning that it adjusts its height and width in relation with current screen size.
<style>
#mediaPlayer{
position: relative;
height: auto;
padding-bottom: 56.25%;
padding-top: 1.875em;
overflow: hidden;
border: 0.1875em double #185875;
background-image:url('../video_loading.gif');
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-attachment: fixed;
}
#mediaPlayer iframe{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
}
</style>
/*use the div to specify the exact height and width you want*/
<div style="height: 50%; width:50%;">
<center>
<div id="mediaPlayer">
<iframe id="play_now" width="100%" height="100%" src="source here" value="value here" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</center>
</div>
The video_loading.gif background is usually a good idea for users with slow network to have something in the background while your iframe content is loading
but you have to find your own unique gif file/image and set it's location in the background-image:url('../file-location-here.gif');
Is it at all possible to have an image be a circle in mPDF?
Looked all over and couldn't find any clear answers.
For me this image shows up fine, except that its a square and this should make it a circle.
css
img{
width: 150px;
height: 150px;
border-radius: 150px;
}
php
$inputPath = '../web_content/cool_cat.jpg';
<div class="profile_img">
<img src="'.$inputPath.'"/>
</div>
Found a way to work around this by using the image as a background image instead of an element.
So within the PHP file which creates the pdf with mpdf I just made a div that can take the image path as $inputPath. Seems to work fine now.
HTML / PHP
<div class="profile_img" style="background-image: url('.$inputPath.');"></div>
CSS
.profile_img {
position: absolute;
width: 120px;
height: 120px;
border-radius: 120px;
border-style: solid;
border-color: white;
border-width: medium;
overflow: hidden;
background-size: 150px 150px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Border-radius is not supported on IMG elements.
See Supported CSS in mPDF manual.
Unfortunately, this cannot be faked even with placing the image into a div which supports the border-radius element.
<div style="width: 150px;
height: 150px;
border-radius: 150px;
border: 2px solid maroon;
overflow: hidden;">
<img src="assets/butterfly_ProPhoto.png" />
</div>
I'm doing a grid with several elements in the sidebar of a WordPress site.
Each element of the grid is an image with a label below.
My goal is to have an image change:
the normal state of the image is to be green (#66be2c), then to the passage of mouse cursor will change it in the original image.
I tried using two physical images for the two states and overlaying them when needed. But this solution is very wasteful... load two different image files is not a good thing.
There's a way to achieve the same effect in a more efficient manner?
This is a part of my page code:
<td style="width: 150px; text-align: center;">
<p style="color: #66be2c;">
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" style="width:50px; height:50px" onmouseover="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png';" onmouseout="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png';">
</p
<p style="color: #66be2c;">.NET</p>
</td>
SOLUTION:
The correct way to do this is creating a Vector Image.
What you need is an image editor (such as Adobe Illustrator or others) and a C compiler (in particular two libraries for xslt)
These are two links that may be useful: SVG-Stacking_Guide and GitHub-SVG-Stacking-Download
I hope this can be of help to others who have the same problem.
It's a bad approach,
I'm not an expert in CSS or design but i think you should do :
<div class='overlay'></div>
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png" style="width:50px; height:50px">
</div>
And put a class in CSS like this :
.overlay { background-color: your_color; }
.overlay:hover { background-color: transparent; }
You can overlay a DIV with a lesser opacity on to the image, and then register the hover such that the covering div fades away and the real image appears.
<div class='cover'></div>
<img id='your-image' />
The CSS for the image would be as such:
.cover{
position: absolute;
top: 0;
left: 0;
opacity: .7;
background: green;
/* additional transition effects */
-webkit-transitions: all .3s;
-moz-transitions: all .3s;
transitions: all .3s;
}
.cover:hover{
opacity: 0;
}
Note that the covering div and the image should be in the same containing div relative to each other.
You could use the ::before selector to achieve this. This would mean not using any extra markup, and no javascript either. You'd really benefit from not using that inline css either. Take a look at CSS :: Before
HTML:
<table>
<tr>
<td>
<p>
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" class="image">
</p
<p>.NET</p>
</td>
</tr>
</table>
CSS:
td {
width: 150px;
text-align: center;
}
td p {
color: #66be2c;
}
.image {
width:50px;
height:50px;
position: relative;
}
.image::before {
content: "";
position: absolute;
height: 50px;
width: 50px;
top: 0;
left: 0;
background: green;
}
.image:hover::before{
display: none;
}
Basically, this targets your image with a class of .image and puts a 50 x 50px box on top of it with a green background. When you then move your mouse over it, it gets rid of the box.
You can see this working in this fiddle
I'm trying to make square images from rectangular in css. They also need to be centered.
I've read a lot of questions here, but the answers, good as they might be, always use constant sizes in pixels whereas I need tem to be in percents so the theme can remain responsive.
Basically I need to change this:
into this:
but if the screen is even smaller:
The main problem here is I cannot predict the screen size. It is designed for mobile, so they can vary.
I was thinking about doing css in php (it's for wordpress so it's possible). I was thinking something like width:50% and use the width as a variable, but if I set the height to be equal to width, it will be 50% as well. Is there a way to, I don't know, convert the width to pixels or something? I'm out of ideas, please help.
The problem is, that it is just not possible to change the height relative to the width. So your problem is not the image itself (using overflow: hidden or background-size: cover will do that) but having the square size of your container with dynamic width and then the same height.
A very strange way would be to use a square image (_blank.png with 1px x 1px) and add width: 100% so the height will be the same.
with css:
div{width: 30%;}
img{width: 100%;}
and then add your actual picture as background-image with
background-size: cover;
background-position: center;
Neither performant nor beautiful, but it works.
have you tried this
img { width: 80%; }
make sure there is no height for img in your css file. Also make sure not to set something like height="500px" width="500px" in your html/php file.
also to be centered just do
img { margin: auto; }
Nice picture ;)
If you have an image you want centred—but covers—a parent element, using CSS only, then you’ll need two wrappers:
This works only for wide images. Portrait images will just centre themselves within the container.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.outer-wrapper {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
.inner-wrapper {
position: relative;
display: inline-block;
right: -50%;
}
.inner-wrapper img {
display: inline-block;
position: relative;
left: -50%;
}
</style>
</head>
<body>
<div class="outer-wrapper">
<div class="inner-wrapper">
<img src="//placehold.it/400x200" alt="" />
</div>
</div>
</body>
</html>
Just use img{max-width:100% !important; margin:0 auto !important;} and I think it will help you.
Try following css for your image. It won't break the pixels/dimensions for the image.
.imageClass img {
width: 50%;
height: auto;
}
.imageClass img {
width: auto;
height: 50%;
}
<img src="image_path" alt="" class="imageClass" />
I want to center an image in an area, without resizing... I am using HTML.
Example:
I have an image <img src='img1.png' width='64' height='64'> - the image is actually 64x64. It displays perfectly.
Now, I have another image <img src='img2.png' width='64' height='64'> however, the image is not as big as it should be, its 32x32 - what happens here is it resizes the image to 64x64 and makes it look like $%^&.
How do I make images smaller then the desired width and height centered in the 'img' area without any resizing what so ever?
What you will need is something like this:
<div class="box">
<img src="whatever size image you'd like" />
</div>
And for the styling (in an external stylesheet, natch) you'd apply:
/* Image centering */
div.box {
border: 1px black solid;
height: 64px;
width: 64px;
background: #444;
display: table-cell;
vertical-align: middle;
}
.box img {
display:block;
margin: 0px auto;
}
This works for images with dimensions <= 64x64px, and is easily modifiable to work with larger pics. The key elements here are
set dimensions on the div
display as a table-cell (allows vertical align)
vertical align (aligns on the Y-axis w/out weird hacks)
display:block on the img element
margin: auto centers the image laterally
Solution without IE-unfriendly display:table-cell:
<!DOCTYPE html>
<style>
div {
line-height:64px; /* that's the secret sauce */
text-align:center;
width:64px; height:64px;
}
img {vertical-align:middle}
</style>
<div><img …></div>
You could try putting the image inside a DIV that is 64x64 and not specifying the image dimensions. Then you could style the div so its contents are centered and any overflow is hidden.
You can dynamically get an image size using the getimagesize() php function:
<?php
$size = getimagesize('imgX.png');
$height = $size[1];
$width = $size[0];
?>
<div style="text-align: center">
<img src="imgX.png" width="<?php print($width) ?>" height="<?php print($height) ?>" />
</div>
I've had to do something similar with 36x36 images. Users were able to upload any size but the thumbnails were only to show the center 36 square pixels.
Markup:
<li><div><span></span>
<img src="_media/objects/jessica-bowman.png" alt="Jessica Bowman" /></div>
<p>Jessica Bowman</p>
</li>
The span was just there to get rounded corners on the image, it's not necessarily needed.
CSS:
ul.recent-list li div {
position: relative;
float: left;
width: 36px;
height: 36px;
overflow: hidden;
}
ul.recent-list li div span {
position: relative;
z-index: 100;
display: block;
width: 36px;
height: 36px;
background: url("../_media/icons/icon-overlay.png") top left no-repeat;
}
ul.recent-list li div img {
position: relative;
top: -36px;
z-index: 0;
float: left;
}
JavaScript:
$(window).load(function() {
$("ul.recent-list div img").each(function() {
var moveX = ($(this).width() / 2 * -1) + 18;
var moveY = ($(this).height() / 2) * -1 - 18; // 18 is 1/2 the default offset of 36px defined in CSS
$(this).css({'top' : moveY, 'left' : moveX});
});
});
The solution is a simple bit of CSS + HMTL
<img src="transparentpixel.gif"
width="64"
height="64"
style="
background-image:url('path/to/image.jpg');
background-repeat:no-repeat;
background-position:center center;
" />
the transparentpixel.gif is a simple 1x1px transparent gif image
An img tag with width and height attributes is saying "stretch or shrink the image to this size regardless of its actual size". use something like:
<div style="text-align:center;">
<img src="x.jpg">
</div>
and no i don't know why text-align would work, but it appears to in my experience.
Use CSS to render the image using background:
<div style="background: url(img1.png) no-repeat center center; height: 64px; width: 64px;"></div>
This will show the image in the center, without scaling it.