I'm trying to find a solution how to vertically align image in a div with 100% height (I don't know it's height).
I've got this HTML. I can't do much with HTML except add more wrappers:
<div id="wrapper">
<img src="http://www.lovecpokladu.cz/nalezy/9687/5.jpg" alt="" />
</div>
And this quite fixed CSS - primary I need to accomplish that the image doesn't overflow browser's window in all browsers:
#wrapper {
position: absolute;
width: 100%;
height: 100%;
background: #ddd;
}
img {
max-width: 100%;
max-height: 100%;
}
http://jsfiddle.net/2nkVm/
Thanks a lot!
Try this:
img {
display:block;
position:absolute;
top:50%;
margin-top:"negative margin based on half of image height";
}
Updated your fiddle:
http://jsfiddle.net/2nkVm/3/
$(document).ready( function() {
positionImage();
$(window).resize( function() {
positionImage();
});
});
function positionImage() {
var wrapperHeightOffset = $('#wrapper').height() - $('#wrapper img').height();
var wrapperHeightOffset = wrapperHeightOffset/2;
$('#wrapper').css('paddingTop', wrapperHeightOffset + 'px');
}
Related
I'm trying to do image "carousel" with horizontal scroll. Pure HTML + CSS without JS.
This is my HTML:
<div class="slideshow">
<figure class="slideshow__fig">
<img src="img/hilti-png.png" alt="" class="slideshow__fig-img">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
<figure class="slideshow__fig">
<img src="img/hilti-png.png" alt="" class="slideshow__fig-img">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
<figure class="slideshow__fig">
<img src="img/hilti-png.png" alt="p" class="slideshow__fig-img">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
</div>
This is my css:
.slideshow {
display: flex;
flex-wrap: nowrap;
overflow-y: hidden;
overflow-x: scroll;
//width: 80vw;
//margin: auto;
&::-webkit-scrollbar {
width: 350px;
height: 10px;
}
/* Track */
&::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: #888;
border-radius: 500px;
}
/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
background: #555;
}
&__fig {
flex: 0 0 auto;
height: 900px;
&-img{
height: 100%;
//width: 100%;
display: block;
}
}
}
1 - The problem is when I set the width of the .slideshow to 80vw, then naturally the scrollbar is shorter, but my images are cropped and not going full display width. When I try to adjust the width of the scrollbar with ::-webkit-scrollbar {width: 350px or 50vw or ...} exactly nothing happens.
I would like to have a scrollbar which is not full width of the div which I'm scrolling, but somehow can't figure it out.
2 - The other problem is I would like to have a figcaption at the bottom left side of the image. But somehow it doesn't show when the horizontal scroll is there. Any suggestions?
Here is the example how I would like to have it:
example image
edit: Now I finally managed to do it by adding:
&::-webkit-scrollbar-button:end:increment {
width: 50%;
display: block;
background: transparent;
}
But now the problem is that the scrollbar is not in middle, but on the left side. Margin:auto doesn't help. No idea how else to do it.
Also making img size 90% revealed the caption which is not that bad solution.
Now the only question is how to put the scroll bar in the centre.
Here is something close to the image you provided as an example. Sorry, but I really don't know how this can be achieved respecting the Pure HTML + CSS without JS criteria. I think it isn't possible at all.
So here, it uses jQuery and jQuery-ui draggable.
It uses a draggable div contained within its parent. Ondrag, it calculates the "scrolled" percentage to apply it to the scrollable width of the image slider.
For mobiles... I added the "touch punch" patch for jQuery-ui. More details about it here. I also placed the "initialisation code" in a function, so it can run on load AND on resize.
$(document).ready(function(){
function initDisplay(){
let slide_scrollWidth = $("#slide")[0].scrollWidth;
let customScrollbar_width = $("#sliderScroll_outer")[0].scrollWidth;
let percent = slide_scrollWidth/customScrollbar_width
$("#sliderScroll").css({"width":percent+"%", "left":0})
$("#slide")[0].scrollTo(0,0)
}
// On page load
initDisplay()
// Useful for mobile orientation change
window.onresize = initDisplay
$("#sliderScroll").draggable({
containment: "#sliderScroll_outer",
scroll: false,
drag: function(e){
let parentOffset = $(e.target).parent().offset().left
let offset = $(e.target).offset().left
let scrollableWidth = $(e.target).parent().width() - $(e.target).width()
let sliderPercent = (offset-parentOffset)/scrollableWidth
//console.log(sliderPercent)
let imageSliderWidth = $("#slide")[0].scrollWidth - $("#slide").width()
//console.log(imageSliderWidth)
$("#slide")[0].scrollTo(sliderPercent*imageSliderWidth,0)
}
});
});
#container{
margin: 1em;
}
#slide{
display: flex;
overflow: hidden;
}
#slide img{
margin: 0 0.5em;
}
#sliderScroll_outer{
width: 40vw;
background: lightgrey;
margin: 1em;
}
#sliderScroll{
width: 0vw;
height: 10px;
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<div id="container">
<div id="slide">
<img src="https://via.placeholder.com/800x600.png">
<img src="https://via.placeholder.com/400x600.png">
<img src="https://via.placeholder.com/1000x600.png">
</div>
<div id="sliderScroll_outer">
<div id="sliderScroll"></div>
</div>
</div>
Run in full page mode or CodePen
I have a mostly responsive Wordpress website with some images aligned either left or right. I want to remove the float property of these aligned images when they occupy a percentage of the screen (about %50) as it's causing issues with how the text is displayed (one word next to an image, then followed by the rest of the paragraph).
When I remove the float property I get exactly the behaviour I want from the website, but I don't know how to set it so it only triggers under these conditions.
Below is the CSS for the affected images.
img {
display: inline-block;
max-width: 100%;
}
.align-right {
float: right;
}
You should use javascript to calculate the width of window and compare to width of image.
function myFunction() {
var img = document.getElementById("Image");
var div = document.getElementById("myDiv");
if (img.offsetWidth > window.innerWidth / 2) {
div.style.cssFloat = "none";
}
else {
div.style.cssFloat = "right";
}
}
img {
display: inline-block;
max-width: 100%;
width: 400px;
background-color: lightgrey;
height: 200px;
}
<body onresize="myFunction()" onload="myFunction()">
<div>
<img id="Image" src="" alt="Image" />
<div id="myDiv" style="background-color: lightgrey;">
Hello This is Div.
</div>
</div>
</body>
Show the result in full page for your better results.
How can I resize an image so that it is as large as possible within its container without losing its aspect ratio?
This could be achieved with the picture element but I need to support IE9.
Note that in my example both the images are smaller than the container, but in reality some will be larger and have to be scaled down.
I cannot use background images and I would prefere not to use javascript if possible.
Images that are larger than there container can easily be scaled down with this:
img {
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
}
Therefore is there a way to trick the browser into thinking the image is larger than it is? This is similar to what you can do with the picture element where with the sizes attribute you can set the intended size of the image.
http://codepen.io/anon/pen/KdaboK
<div class="one">
<img src="http://www.nwhgeopark.com/wp-content/uploads/landscape.jpg" />
</div>
<div class="one">
<img src="http://ecx.images-amazon.com/images/I/519fW0fHKbL._SY300_.jpg" />
</div>
.one {
border: 1px solid red;
float: left;
margin: 20px;
height: 500px;
width: 500px;
}
img {
}
You could use this jquery:
$(document).ready(function() {
var imgs = $('img');
imgs.each(function(){
var img = $(this);
var width = img.width();
var height = img.height();
if(width < height){
img.addClass('portrait');
}else{
img.addClass('landscape');
}
})
});
Which will add a class to images based on orientation. then add this css:
.landscape {
width:100%;
height:auto;
}
.portrait {
height:100%;
width:auto;
}
And it could behave as you are looking for:
JSFIDDLE
First Get the image width and height on the fly using jQuery and then set it by finding the multiplication factor according to the container width .....
<script>
getImageSize($('#image'), function(width, height) {
$('#info').text(width + ',' + height);
var multiplyFactor = ContainerWidth / width;
//Now set the image width and height
$(img).css({'width': width*multiplyFactor +'px',
'height':height * multiplyFactor+'px'});
});
function getImageSize(img, callback) {
var $img = $(img);
var wait = setInterval(function() {
var w = $img[0].naturalWidth,
h = $img[0].naturalHeight;
if (w && h) {
clearInterval(wait);
callback.apply(this, [w, h]);
}
}, 30);
}
</script>
I think the simplest would be to separate portrait format pictures from landscape format ones and apply a responsive rule, try this, it should work
<div class="one">
<img class="landscape" src="http://www.nwhgeopark.com/wp-content/uploads/landscape.jpg" />
</div>
<div class="one">
<img class="portrait" src="http://ecx.images-amazon.com/images/I/519fW0fHKbL._SY300_.jpg" />
</div>
.one {
border: 1px solid red;
float: left;
margin: 20px;
height: 500px;
width: 500px;
}
img.landscape {
width: 100% !important;
heigth: auto !important;
}
img.portrait {
height: 100% !important;
width: auto !important;
}
Like many others I wanted to show an enlarged image when hovering over a thumbnail. I used a hover selector to enlarge the image which worked fine.
Instead of having the image shrink when I moved off the image, I wanted the image to shrink when I moved off area that was occupied by the original thumbnail which was 100px X 100px.
I put a div around it, sized it and put the :hover on it rather then the image. I thought because the enlarged image was positioned absolute it wouldn't enlarge the div.
The image still enlarges but it does not shrink unless the cursor moves off the enlarged image.
div.hov:hover >.thumbnail {
position:fixed;
top:100px;
left:50px;
width:800px;
height:auto;
display:block;
z-index:999;
}
div.hov{
width:101px;
height:101px;
float:left;
overflow:visible;
margin: 10px;
}
<p>
<div class="hov"><img src="./gm1.png" class="thumbnail" height="100" width="100" /></div>
<div class="hov"><img src="./gm2.png" class="thumbnail" height="100" width="100" /></div>
</p>
Is there any way to achieve this? The hosted version is here.
one way to do this is to show a new modal div on top of the original image. that way your original div doesn't enlarge. however, you'll need to use some javascript or jQuery
heres a fiddle to demonstrate: http://jsfiddle.net/k3oq1899/1/
don't mind the code, I put it together very quickly for you, but you can clean it up a bit.
html
<div class='image'>
<img src='http://www.online-image-editor.com//styles/2014/images/example_image.png'/>
</div>
<div id='modal'></div>
css
.image {
display: inline-block;
width: 100px;
height: auto;
}
img {
width: 100%;
height: 100%;
display: inline-block;
}
#modal {
display: none;
position: absolute;
top: 0;
left: 0;
}
jquery
$(function() {
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function (event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
if($('#modal').css('display') != 'none') {
$('#modal').css({
top: currentMousePos.y,
left: currentMousePos.x + 12
});
}
});
$('.image').on('mouseover', function() {
var image = $(this).find('img');
var modal = $('#modal');
$(modal).html(image.clone());
$(modal).css({
top: currentMousePos.y,
left: currentMousePos.x + 12
});
$(modal).show();
});
$('.image').on('mouseleave', function() {
$(modal).hide();
});
});
Instead of enlarging the image, think of actually creating two images, one big and one small one. Once you hover over the small one, you can make the big image visible or invisible when moving out of it.
use absolute positions, display:block and display:none and check if the z-index is right.
But is this really necessary?
The hovering does not seem convenient to me....
You can put an invisible DIV with same dimensions over the thumbnail, put it on top with z-index and use it for the hover-event. But you need a few lines of javascript (with jQuery in my example).
HTML
<div class="box">
<div class="thumbnail">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="">
<div class="overlay"></div>
</div>
<div class="large-image">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="">
</div>
</div>
Javascript (jQuery)
$('.overlay').hover(
function () {
$(this).closest('.box').addClass('show-large-image');
},
function () {
$(this).closest('.box').removeClass('show-large-image');
});
CSS
.box {
padding: 200px;
}
.thumbnail {
position: relative;
display: inline-block;
border: 1px solid #888;
}
.overlay {
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.large-image {
display: none;
position: absolute;
top: 0;
left: 0;
width: 500px;
}
.large-image img {
width: 100%;
}
.box.show-large-image .large-image {
display: block;
}
Example: http://jsfiddle.net/dx0d1ceh/
Basically I have something like this at the moment:-
The black rectangle is the div element I would like to extend to the bottom of the page so it will be at the bottom no matter which screen resolution you are using. The black background div will be replaced with an image (so if possible I don't want the image to be distorted.)
At the moment the code I have is:-
HTML
<div id="main-container" class="container">
<img style="width: 100%; height: 100%;" src="http://url.com/test.jpg" alt="" class="alignnone size-full wp-image-37" />
</div>
CSS:
#main-container {
height: 100%;
background-color: #000;
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
And then I am using bootstrap which contains all the CSS for the max-width.
.container {
width: 1170px;
}
At the moment, the image goes past the bottom of the page but I want to contain in within the bottom of the browser. What would be the best way to achieve this?
You need to add position and also height & width:
height: 100%;
width: 100%;
position: fixed;
You can't do this with CSS. You need to use Javascript to dynamically modify the CSS for what it detects. I use something like this:
function setSizes() {
"use strict";
var height = ($(window).height() - $("#top").height()) - 5,
fancytree_padding_text = $(".fancytree-container").css("padding-top"),
get_padding = new RegExp("(.*?)(px)"),
fancytree_padding = parseInt(get_padding.exec(fancytree_padding_text)[0], 10);
$(".fancytree-container").css("max-height", (height - (fancytree_padding * 2) - 5) + "px");
$(".feeds").css("max-height", height + "px");
$(".details").css("max-height", height + "px");
$(".bottomPadding").css("padding-top", (height - ($(".bottomPadding p").height() + 55)) + "px");
setFeedWidths();
}
I also add code to listen for resizing and call this when the document loads:
$(function () {
"use strict";
setSizes();
$(window).resize(function () {
setSizes();
});
}