I want to frame the image, getting just the width:300px; of the image visible and the rest of the width invisible. I have been working with object-fit:cover and overflow: hidden. But I haven't been able to do it while still having the image responsive (width: 100%),scaling in size.
Here is the html code for the image:
<div id="pgc-1397-2-0" class="panel-grid-cell">
<div id="panel-1397-2-0-0" class="so-panel widget widget_sow-image panel-first-child panel-last-child" data-index="2">
::before
<div class="so-widget-sow-image so-widget-sow-image-default-bf8d3ff3bedb">
<h3 class="widget-title">KRAGEN</h3>
<div class="sow-image-container">
<img src="http://www.ny.nordicredesigners.dk/wp-content/uploads/2018/03/unspecified-3-31.jpeg"width="800" height="450" srcset="http://www.ny.nordicredesigners.dk/wp-content/uploads/2018/03/unspecified-3-31-300x169.jpeg 300w, http://www.ny.nordicredesigners.dk/wp-content/uploads/2018/03/unspecified-3-31-768x432.jpeg 768w, http://www.ny.nordicredesigners.dk/wp-content/uploads/2018/03/unspecified-3-31.jpeg 800w" sizes="(max-width: 800px) 100vw, 800px" title="KRAGEN" class="so-widget-image"
</div>
</div>
Here is a link to the webpage:
http://www.ny.nordicredesigners.dk/
Here is a picture of how I want to frame the picture:
and this is what I want for result:
I have made fiddle here: https:www.jsfiddle.net/q2yrqvxv/5/
Control Image Aspect Ratio Using CSS object-fit and object-position properties allow you to scale images and videos, much like you could with background-size and background-position.
Moreover here you will get documentation and example
img {
width: 90vw;
height: 75vh;
border: 3px solid tomato;
object-fit: cover;
object-position: 0 0;
}
/* Demo styles only */
* {
box-sizing: border-box;
}
body {
margin: 0;
}
<div>
<img src="https://i.imgur.com/9Q9pgmR.jpg">
</div>
Related
I have a problem with my website banner. When I view my banner image on a phone screen, the text on the banner is too small to see. Due to this, I made the width of my image 120% (on CSS) so the text would be larger on a phone screen. When I did this, the banner just extended longer than the website length - but I want the excess banner to be cut off. I tried to solve this by using 'overflow: hidden' but it didn't work. Ultimately, I just want to crop the excess length off my banner but I don't know how.
HTML:
<div class="content">
<div class="banner">
<img src="images/large_banner.png" width="1440" height="80" alt="Sister banner"/>
</div>
</div>
CSS:
#media only screen and (max-width: 550px){
.banner{
height: auto;
width: 120%;
overflow: hidden;
}
}
You put width to the wrong place. You should paste height and width for image and put overflow: hidden; to div .banner.
Here's an example
img{
width:100%;
}
#media only screen and (max-width: 480px){
.content{
width:360px;
margin:0 auto;
}
.banner{
width:90%;
margin: 0 auto;
overflow: hidden;
}
.banner img{
width: 250%;
margin-left:-138px;
}
}
<div class="content">
<div class="banner">
<img src="http://man-centr.uz/image/cache/catalog/slider/slider2-1920x641.jpg" alt="Sister banner"/>
</div>
</div>
I want to make the following bootstrap code automatically show an overlay for two out of three options contained in a database field. They are SOLD, CONTRACT, and NO.
I want different overlays for SOLD and CONTRACT, and no overlay for NO
I have searched for overlays, most tutorials have on hover events, and I am lost as to how to do this.
<div class="row">
<div class="col-md-6 col-md-offset-3">
<a href="listing_show.php?ID=<?php echo($Recordset1->getColumnVal("ID")); ?>">
<img src="images/<?php echo($Recordset1->getColumnVal("IMAGE")); ?>" class="img-responsive center-block sold" alt="<?php echo($Recordset1->getColumnVal("TITLE")); ?>"/>
</a>
</div><br><br>
</div>
I worked it out through a couple of js fiddles on other questions here, if it helps anyone here is the code I added...
html
I added a thumbnail div and a caption div underneath the image both conditional on the contents of the database field.
<?php if($Recordset1->getColumnVal("SOLD") == "YES") { ?>
<div class="caption post-content-sold"></div>
<? } ?>
<?php if($Recordset1->getColumnVal("SOLD") == "CON") { ?>
<div class="caption post-content-contract"></div>
<? } ?>
Then in the CSS I added code to make the thumbnail relative, and then added the two classes to style the image relating to the database field
.thumbnail {
position: relative;
}
.post-content-sold {
background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
opacity: 0.8;
top:0;
left:0;
min-width: 100%;
max-height: 98%;
position: absolute;
color: #ffffff;
content:url(http://www.mtnlakerealty.com/sold.png);
}
.post-content-contract {
background: rgba(255, 255, 0, 1) none repeat scroll 0 0;
opacity: 1;
top:5%;
left:5%;
max-width: 50%;
max-height: 50%;
position: absolute;
color: #ffffff;
content:url(http://www.mtnlakerealty.com/contract.png);
}
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
E.g. I have a link
http://img.youtube.com/vi/aOPGepdbfpo/0.jpg
for a youtube video thumbnail:
And I would like to remove the black top and bottom border so I get a picture like this:
Could it be done using PHP function javascript/jQuery or maybe youtube api itself?
YouTube offers images that don't have the 4:3 ratio black strips. To get a 16:9 video thumbnail with no black strips, try one of these:
http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg
The first one mqdefault comes as a 320x180 pixel image.
The second one maxresdefault comes as a 1500x900 pixel image, so it would need resizing to use as a thumbnail. This is a nice image but it isn't always available. If the video is of a low quality (less than 720p I'd imagine, not exactly sure) then this 'maxresdefault' becomes unavailable. So never rely on it.
Use it as a background image, center it and change height.
http://dabblet.com/gist/4012604
.youtubePreview {
background:url('http://img.youtube.com/vi/aOPGepdbfpo/0.jpg') center no-repeat;
height:204px;
width:480px;
}
If you want it with a flexible width, use this:
HTML
<div class="thumb">
<img src="...">
</div>
CSS
.thumb {
overflow: hidden;
}
.thumb img {
margin: -10% 0;
width: 100%;
}
To remove the black borders from the Youtube thumbnail we need not have to write a seperate code or CSS. Simply use the ytimg.com site, that stands for YouTube image, which fetches the images from YouTube, like thumbnails and icons as required which come from that domain.
Example shown below -
Original Image [With borders]
http://img.youtube.com/vi/JQ7a_8psCn0/hqdefault.jpg
With No borders/Strips
http://img.youtube.com/vi/JQ7a_8psCn0/mqdefault.jpg
OR
http://i.ytimg.com/vi/JQ7a_8psCn0/mqdefault.jpg
This is answer I gave for similar question, but it will solve your problem completely, just cut everything you don't want to be shown from the video with the wrapper div, this is done with html and css.
After searching the net a while for fix of this issue I came up with nothing, I think I have tried everything and nothing solved my problem. Then driven by my logic I just wrapped the iframe of the embedded youtube video in one div set overflow: hidden; to this div and made it's height 2px smaller then the iframe height (on my video there was black border in the bottom).
So the wrapper div is smaller then the iframe and with positioning it over the video you can hide the black borders you don't want.
I think that this is the best solution from everything I have tried so far.
From this example below try embedding just the iframe and you will see small black border at the bottom, and when you wrap the iframe in the div the border is gone, because the div is overlapping the iframe and it's smaller then the video, and it has overflow: hidden so everything that goes out of the div dimensions is hidden.
<div id="video_cont" style="width: 560px;
height: 313px;
overflow: hidden;">
<iframe id="the-video" class="extplayer" width="560" height="315" src="https://www.youtube.com/embed/EErx017kDHQ?&autoplay=0&rel=0&fs=0&showinfo=0&controls=0&hd=1&wmode=transparent&version=2;yt:quality=high;" frameborder="0" allowfullscreen></iframe>
</div>
In my case the border was with about 2px height so I made the wrapper div 2px smaller in height to hide the border, in your scenario if the border is on the top of the video or on the sides and/or with different dimensions, you have to make different dimensions for the wrapper div and position it good so it overlaps the video where the borders are and with overflow:hidden; the borders are hidden.
Hope this will help.
How youtube do it. There's lot of parameter in the image url.
https://i.ytimg.com/vi/XkOpbLBzPsY/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=Gv-oyTIgA39e7UG01pZ2RiGbwSo
I'm not an expert, i was looking for a solution to remove the black bars of youtube video thumbnails, found a few solutions but didn't worked for me. Started experimenting with the solutions i found and came up with this.
https://jsfiddle.net/1fL2ubwy/
.row, .col, [class*="col-"] {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.yt-thumb {
width: 100%;
height: 74%;
overflow: hidden;
}
.yt-thumb > img {
margin: -10% 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap-theme.min.css">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-6 card vd-block mb-3">
<a class="yt-thumb" href="https://www.youtube.com/embed/wb49-oV0F78" data-rel="lightcase">
<img class="aligncenter" src="https://img.youtube.com/vi/wb49-oV0F78/hqdefault.jpg" alt="thumbnail" width="100%" height="auto">
</a>
</div>
<div class="col-md-6 col-sm-6 col-6 card vd-block mb-3">
<a href="https://www.youtube.com/embed/wb49-oV0F78" data-rel="lightcase">
<img class="aligncenter" src="https://img.youtube.com/vi/wb49-oV0F78/hqdefault.jpg" alt="thumbnail" width="100%" height="auto">
</a>
</div>
</div>
</div>
I needed a responsive way of doing it, so let's consider this code is running on the window.addEventListener("resize");
We basically want to convert the 4:3 ratio to 16:9
<div id="video-item">
<img src="https://i.ytimg.com/vi/{videoId}/hqdefault.jpg" />
</div>
const videoItem = document.getElementById("video-item");
const img = videoItem.querySelector("img");
resize()
{
img.style.top = `${-(img.offsetHeight - (img.offsetWidth * 9 / 16)) / 2}px`;
videoItem.style.height = `${9 / 16 * videoItem.offsetWidth}px`;
}
#video-item
{
position: relative;
overflow: hidden;
}
#video-item img
{
width: 100%;
position: absolute;
}
BTW, you can also fallback to the calculated height for the image (in case the image wasn't fully loaded)
img.style.top = `${-((img.offsetHeight || (3 / 4 * img.offsetWidth)) - (img.offsetWidth * 9 / 16)) / 2}px`;
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.