HTML/CSS image overlay - html

Implementing a "play video" function on a web site. Each video content item can have a different image. Each of these images will have the same width, but potentially differing heights (they are resized on upload to maintain aspect ratio to meet standard width requirements).
The plan was to display another transparent "play button" image over top of the content image using markup like this:
<div class="media">
<a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
<img src="PlayButton.png" alt="Click to Play" height="200" width="300" />
</a>
</div>
This is very similar to how channel 9 does it on their home page. This, however, appears to assume any image is of standard height and width. Are there alternative ways of tackling this?
Forgot to mention originally. We have a predefined width that things will fit into, however, each image may have a different height. For example, the same markup needs to be used to support the following images:
W x H
400 x 200
400 X 300
400 X 400
The Play button needs to be centered in each image.

Instead of the inner element being an <img>, you could make it a <div>, styled with the playbutton as the background image, positioned in the center.
<div class="media">
<a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
<div style='background:url(PlayButton.png) center center;' alt="Click to Play" height="200" width="300" />
</a>
</div>
You'll still need to know the size of the thumbnail image, as you'll still need to supply height and width for the div - since you're displaying the thumbnail as a background image, you won't be able to have the box scale to the right size automatically. But at least now your code can set the values for height and width without worrying about the shape of the play button getting distorted.
(note: the play button as a background image should probably be in a separate stylesheet rather than being declared inline as per my example; I did it like that to demonstrate how it differs from your original code, rather than to show best practice)

Need some your CSS to make sure things work, but this may help you:
.media {
display: table;
}
.media img {
display: table-cell;
vertical-align: middle;
display: block;
margin: 0 auto;
}
If not, please add you CSS so I can Fiddle it and make it happen.

I'd do it like this.
<div class="media">
<a class="videoLink" href="#"></a>
<img class="thumbnail" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"/>
</div>
Separate the thumbnail image from the link. We want the link to appear on top of the image, and the image to stretch the height of the <div class="media">.
The CSS:
.media {
position: relative;
}
.videoLink {
display: block;
height: 100%;
width: 100%;
background-image: url(PlayButton.png);
background-position: center center;
position: absolute;
z-index: 2;
}

Related

How to incorporate different sized logo images into image tag at runtime

In Email template design, we have to add sender logo, which is of three different shapes rectangular, square and vertical.
rectangular width around 102*18
square 43*40
vertical 18*43
The images gets loaded from backend at runtime.
The provided images for logos are High resolution. I tried to resize images and without fixed width fixed width/ height on img tag. It worked but the display quality is very poor as it lost some pixels while resizing.
I can not give fixed width i.e. 102px as other images(square and vertical) gets stretched.
<table><tr><td><img src="abc.net/{{logoid}}"></td></tr></table>
Welcome to SO!
In your case you need to set object-fit property in img so that
what ever its dimension is it can fit inside your layout that suits
best, object-fit: contain worked best in you scenario as you upload
logo so it need to be fully display.
NOTE: you need some specific height just for the layout it wont effect your image dimension
Here is an example
.cover {
object-fit: contain;
width: 150px;
height: 100px;
}
<figure class="original-image">
<img src="https://i.stack.imgur.com/2OrtT.jpg" width="242" height="363" />
</figure>
<figure class="cropped-image">
<img src="https://i.stack.imgur.com/2OrtT.jpg" width="242" height="363" class="cover" />
</figure>
There's a polyfill for IE: https://github.com/anselmh/object-fit

Fill a div with an image (object-fit question)

I have images that are dynamically pulled and cannot be certain of the image size or ratio of the image.
Using bootstrap4 (and wordpress) i'm trying to scale the image so that it fills the width and height of the div, and if possible maintain the aspect ratio (its ok if the image gets portions cutoff).
My image is currently breaking the height of the div and the image will size outside of the div.
.blog-home {
max-width: 570px;
max-height: 225px;
}
.blog-home img {
object-fit: cover;
max-height: 210px;
}
img {
max-width: 100%;
height: auto;
}
<div class="row article">
<div class="col-md-6 blog-home">
<picture width="778" height="312" class="attachment-large size-large wp-post-image">
<source type="image/webp" srcset="..." sizes="(max-width: 778px) 100vw, 778px">
<img src="..." sizes="(max-width: 778px) 100vw, 778px">
</picture>
</div>
<div class="col-md-6">
....
</div>
</div>
My tags are dynamically replaced with tags. I can't sort out how to fix this without breaking the responsive-ness of the layout.
Then I would suggest that you use background-size: cover. Here is the definition according to https://www.w3schools.com/cssref/css3_pr_background-size.asp.
Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
Use Cover to resize the background image to cover the entire container.
Here is an example link:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover
The best solution would be to cut or crop the images somewhere in the wordpress, here is a good read on why and how it can be achieved. In case your images are already in the Media Library - use Regenerate Thumbnails plugin to fix all of them in one click.
I think there are a lot of styles involved in the case, so it won't be so easy to get which exact part of it breaks the output without inspecting the full source, however in the worst case you could add .blog-home {overflow:hidden} to cut all what goes outside the div.

CSS is not loading a local image?

I am trying to show image from my PC in my website using html file using css. The css, the image, and the html file are in the same directory the image is shown inside the web browser inspector as shown but not showing in the page it self Inspected Element
.logo {
background: url(https://placekitten.com/100/100);
}
<div class="logo"></div>
The div has no height — there is no explicit height in CSS and there is no content in normal flow to give it a height from the height: auto it gets by default.
Since it has no height, it is 0 pixels tall. Multiply the height by the width and you get a box that is 0 square pixels.
With a canvas size of 0, there is no space to display the image on.
Do something to give it a height.
.logo {
background: url(https://placekitten.com/100/100);
}
<div class="logo">
Here is some content.
</div>
That said, a logo is something that conveys information. It isn't decorative. You should express it with HTML not CSS, and include alt text.
<div class="logo">
<img src="https://placekitten.com/100/100" alt="Kitten Inc.">
</div>
The "logo" class must have a height in order to show its contents, you have several ways to set up the height:
01
inside your css, go to '.login' and between{ } write : height:100px;
result
.logo{
height:100px
}
02
Inline like this
<div class="logo" style="height:100px"></div>
03
Using jQuery, like this
$('.logo').height(100);
or
$('.logo').css('height','100px');

How can I force scaled-down svg images to line up next to each other instead of wrapping/getting pushed to the next line?

I have 6 svg images that I would like to appear in a row, like this:
logo_1 logo_2 logo_3 logo_4 logo_5 logo_6
They are of varying widths, but are all the same height, so I used the height property to scale them at the same ratio. That works to scale the svg, but for some reason the img container is still the full width of the layout grid, resulting in each image getting pushed to the next line, like this:
[..............................logo_1............................]
[..............................logo_2............................]
[..............................logo_3............................]
[..............................logo_4............................]
[..............................logo_5............................]
[..............................logo_6............................]
Here's the code that does that:
<div class="gridContainer clearfix">
<div class="sponsorLogo">
<img src=_assets/images/logo_1.svg/>
<img src=_assets/images/logo_2.svg/>
<img src=_assets/images/logo_3.svg/>
<img src=_assets/images/logo_4.svg/>
<img src=_assets/images/logo_5.svg/>
<img src=_assets/images/logo_6.svg/>
</div>
</div>
.sponsorLogo img {
text-align: center;
height: 3em;
}
I can get them to line up in a row when I use the width property, but that causes the images to have non-uniform heights, kind of like this:
logo_1 LOGO_2 LoGo_3 lOgO_4 LOgo_5 loGO_6 (you get the idea. hehe)
Thanks in advance for your suggestions!
Try:
.sponsorLogo img {
text-align: center;
height: 3em;
display:inline-block;
}

placing image as div background

How can I place only an image in a div as background image, and add url link to it.
Currenty I'm doing it this way:
<div class="image"><img src="books.png" alt="Test" /></div>
I want to do something like following, but its not working (the image does not appear).
<div class="image"><span class="books"></span></div>
Thanks.
Place the background image in the <a> tag if you want it clickable.
your css:
.image a { display: block;
background: url('image.jpg') no-repeat;
height: 50px; /* obviously use the same dimensions as your image */
width: 50px; /* obviously use the same dimensions as your image */
}
<div class="image"> </div>
or better yet, get rid of the div entirely, and just apply the image class directly to a:
<a class="image" href="example.com"> </a>
It's likely it's because the div is empty. Try something like:
<div class="image"><span class="books"> </span></div>
If it's still not showing, set the "image" class to have a background color too, so that you can see how big the div 'thinks' it is.
If you want an image to be in the background you need to set, the style property "z-index:-1", that way, the image will be in the back of the other elements in the same content div
Does it have to be a DIV?
I am writing the style inside you can use it in css file
<a class="image" style="display:block; width: (image-width); height: (image-height); background: url(image-link)"></a>
this will work...
you can use it like this if you need div..
<div class="image" style="width: (image-width); height: (image-height); background: url(image-link)"></div>