Center and crop img tag - javascript

Just wondering is it possible to use
<div><img src="xxx.jpg" /></div>
to center the image in the browser
List item to maintain it in the center when reduce browser width for responsive layout
when browser with is smaller than the image it will "not" reduce the image size
instead it will crop the image (overflow:hidden) with the scrollbar but still maintain the image center...
is it possible for using img tag to do this?? I know I can perform it easily with background image using css.
but since I'm working on a CMS site and the image is uploaded by client side, so background image is definitely not a solution....

I think point 3 and 4 make it impossible to do this with CSS only as you would have to set the scroll position using CSS, the best I can come up with using CSS only is: jsFiddle and a Fullscreen Demo.
body {
text-align: center;
}
div {
max-width: 100%;
}
img {
margin: 0 -100% 0 -100%;
}
This approach keeps the image in the center at all times, and it kind of doesn't really reduce the image size, but because I've had to use negative margins, you can't scroll the invisible parts into view.
Instead going for a JS approach you could do it this way: jsFiddle and a Fullscreen Demo.
CSS
body {
text-align: center;
}
div {
width: 100%;
overflow-x: auto;
}
JS
$(window).resize(function () {
$("div").scrollLeft(($("img").width() / 2) - ($(this).width() / 2))
});
This approach uses jQuery to ensure the center of the image scrolls into view whenever the browser window is re-sized.

Related

Avoid CSS-Background-Resize by Chrome-URL-Bar-Toggle with Android

When viewing a website with Chrome for Android, the height of the view-area changes as soon as scrolling causes the URL-bar to hide. When using a fixed background image, this results in annyoing resizing of the image, initially when scrolling down, and also when the user scrolls up again, which enables to URL-bar again.
This topic has already been discussed here:
Background image jumps when address bar hides iOS/Android/Mobile Chrome
There was also a 'fix' announced, that recommends the use of vh instead of % to describe the height of the image:
https://developers.google.com/web/updates/2016/12/url-bar-resizing
Given now a site that contains a fixed background image:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="content">
<div style="padding-bottom:2000px; width:100%;">Test</div>
<div>Test again</div>
</div>
</body>
</html>
using the following CSS:
html, body {
margin: 0;
padding: 0;
}
div {
color:white;
font-size: 30px;
}
#content {
background: url(https://images.freeimages.com/images/large-previews/01a/technology-background-1632715.jpg) no-repeat right 15% center fixed;
background-size: cover;
}
will rescale the background image as described above, using Google Chrome for Android. Here is a Fiddle.
The methods determined to solve this (see linked JS-thread) make use of JavaScript to determine the window height after resizing of the window has taken place and then update the image height. However, it won't stop the background image from resizing without leaving a part of the page blank.
In order to keep the background image in place, two methods seem suitable:
preventing the URL-bar to hide
render the image with an initial offset to be able to compensate the image shift
Preventing the URL-bar to hide
In order to keep the URL-bar visible all the time, I created a fixed-div that contains a scrollable div-container:
<div id="content">
<div id="fixed">
<div id="scroller">
<div style="padding-bottom:2000px; width:100%;">Test</div>
<div>Test again</div>
</div>
</div>
</div>
CSS:
#fixed {
height:100vh;
width:100vw;
overflow:hidden;
}
#scroller {
overflow-y: auto;
height:100vh;
}
The idea is that since the user is not scrolling the website-body, the URL-bar won't disappear. This Even though this works on my emulator, it doesn't work on a real Galaxy S20. A user would be able to hide the URL-Bar after scrolling to the bottom of the page (the div).
Rendering the image with an initial offset to be able to compensate the image shift
The other idea was to draw the background image 'deeper' by default:
background-size: auto calc(100vh + 100px);
If there is "unused" space on top of the image, it should be possible to catch the resize- or touchmove-event, compare the new window height to the initial window height and then compensate the offset. Unfortunately, this will only affect the y-dimensions of the image and I would probably need to do the same for the x-axis or rescale the image again. However, when trying to determine the current image size in JavaScript (using jQuery, see this thread), I ran into another error; retrieving the image-size via $('#background').css('background-size') returned just auto and ignored the second part.
Most threads about this topic are older than five years. Can someone enlighten me and tell me there is a way to manage this by now?
Update:
I was able to eliminate the resizing using the following technique:
Assuming portrait-mode is active, I calculated the image width from the scaled image height and set the background-size to pixel values:
var initHeight = '';
var initWidth = '';
var imageHeight = 982;
var imageWidth = 1500;
var cssHeight;
var cssWidth;
$(window).on('resize', function () {
if (initHeight == 0) {
initHeight = $(window).height();
initWidth = $(window).width();
cssHeight = parseInt($('#content').css('background-size').split(" ")[1].slice(0,-2));
cssWidth = cssHeight / imageHeight * imageWidth;
$('#background').css('background-size', cssWidth + "px " + cssHeight + "px");
}
Now the background image won't scale, but it will move vertical when toggling the URL-bar.
To get rid of this, I make use of the second method described above and draw the background image with an initial offset:
background: url(../images/bg.jpg) no-repeat right 15% top -100px;
background-size: auto calc(100vh + 200px);
As soon as a resize-event occurs, I update the background image position:
let newHeight = $(window).height();
let newWidth = $(window).width();
let diff = newHeight - initHeight;
$('#background').css('background-position', "85% " + (startHeightOffset + diff) + "px")
This seems to work in my emulator. The background image stays in place now. However, when switching devices, I noticed that this approach works only for devices that have no toolbar in the bottom. Emulating a Galaxy S9, which has a URL-bar on the top as well as a toolbar on the bottom, the background image gets shifted too much, since the space acquired by both toolbars (top and bottom) will be added to the top of the image. In order to make this work, I would need to determine the height of the top URL-bar only and I genuinely don't know if this is possible.
Again, in order to solve this problem, one of the following problems must be solved:
reliably prevent hiding of the URL-bar
determining the height of the bottom toolbar
Update 2:
I was able to prevent hiding of the URL bar like so:
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: scroll;
}
body {
-webkit-overflow-scrolling:touch;
}
#content {
width: 100%;
height: 100%;
background: url(https://images.freeimages.com/images/large-previews/01a/technology-background-1632715.jpg) no-repeat right 15% center fixed;
background-size: cover;
}
#fixed {
height:100%;
width:100vw;
overflow:hidden;
}
#scroller {
overflow-y: auto;
height:100vh;
}
The background image stays in place, since the URL-bar will never collapse. However, this isn't the ideal solution and it would be great if there would be a way to make this work without the need of preventing the URL-bar to collapse.

How can I control what parts of the image should show when I minimize the window?

I have an image on my page and it's created using photoshop. The image has text in the middle. When I minimize the window the image shrinks and the text becomes smaller instead of scaled.
I tried:
.img{
width: 100%;
height: 100%;
}
How can I make it when I minimize the window the text will stay the same and the image will be cut from the sides?
Thank you
img element is meant to show a whole image. To display only a part of image, you'd better use a block element with background specified in css. This allows you to specify the size of viewport and position of the image separately.
For example, in html,
<div class='my-image'></div>
in css,
.my-image {
background-image: url(path-to-image.jpg);
background-position: center center;
background-size: auto auto; // This is the default
}
This allows you to position the image centered in the div. No matter how big the div it is, the image size will stay the same(thus only the center part is visible because of the clipping).
For more details about background in css, please read https://developer.mozilla.org/en-US/docs/Web/CSS/background

centering image overlaying another with xray effect

The issue I’m having here is with the x-ray image behind the one in the front. They do not line up. It only does when i stretch the browser out to 1920px. Anything smaller than that causes it to misalign. Note that I purposely set the image to be at 100% width which I know is not responsive.
I want to keep the effect of the image getting cut off on the right and left of the browser. Ideally I'd like both images to be centered and aligned when I decrease the size of the browser.
Here is the Github link:
https://gist.github.com/siravani/71b8d447acaca8b34acfcab82af58c06
If you added a fiddle that would have been a lot easier but all you need to do is add background-size:cover to #flesh css rule
html, body, #flesh {
position: relative;
margin: 0;
height: auto;
max-width: 100%;
background: url("http://www2.yapstone.com/l/109192/2017-04-04/4c61s2/109192/37539/buildings.jpg") no-repeat;
background-position: center;
background-size:cover;
}
this way your background image will fit in container and will match with the original image.
Here is a working fiddle https://jsfiddle.net/w2jjaLn5/

Nuka slider adding 100% width stretches my images in react

I have a carousel with six images that runs infinite using Nuka Carousel
And when i see the images on the page they are stretched on the width. After looking in the console i found that nuka slider class adds 100% width to images and disabling it fixes the images.
.slider-slide > img {
width: 100%;
display: block;
}
is there a way to disable the width so the images won't be stretched?
My solution is as follows. The images don't stretch in full screen.
img.your-class-name {
background-repeat: no-repeat;
min-width: 100%;
width: 100%;
height: 100%;
}
I had this for ages too. Really frustrating. I was using emotion and CSS Grid. So in my case I first made sure I got the demo working by doing this:
Make a component for the slider
Set up the demo code inside the component as is
convert CSS - In my case: import { css } from "react-emotion", then convert the style={{ tags into className={css`
add a view-port based limit using the %vw; in my case I have a 5% gutter down the side so I limited to 90vw (90% of viewport), as follows
<div className={css`
width: 90vw;
margin: auto;
`}>
<Carousel>
// demo code
</Carousel>
Depending on your libs and surrounding css, you will need to vary this approach. I am basically making sure the CSS is all processed at the same time, by the same tool, so it's not compiled in some weird order. Then I'm limiting the div width that contains the carousel. It's twitchy AF - I broke it several times by adding unrelated CSS - and I'm using emotion which prefixes CSS, so it made no sense but hey, that's the joy of CSS.

How to made my background image strech if I dynamicaly insert DIV in the middle of the page

I have a background image which I apply to the body. The image is only in the bottom and stretch to the entire width of the page. The image is 1 X 320 px.
body {
background-image: url("../images/bg-main.gif");
background-position: 0% 100%;
background-repeat:repeat-x;
}
The rest of my web site is in 1024 X 768 resolution.
It works perfectly until I dynamically insert a new DIV in the middle of the page using javascript. It cause the browser scroll bar to appear and when I scroll down to the bottom, I can see the image stopping right at it's original position.
How can I make my image get down again without reloading the page ??? I'm using the EXTJS framework to avoid reloading the page...
Thanks
Alain
im guessing this is IE only,
try:
background-position: 0 bottom;
if my understanding of "The image is only in the bottom" is correct
if that fails causing hasLayout on the body might work, try combinations of
body
{
width: 100%;
position: relative;
}

Categories