Browser firstly is loading div with height 0,
and only after makes height equals image height.
Here are the screen shots : https://puu.sh/vR0Gp/10233ce94d.png
I want to make height as image height from the beginning to avoid repaints.
Here is the page: http://a4004cc1.ngrok.io/banner1.html
html of the banner:
<div class="home-top-box">
<div class="banner">
<img src="mobile-main.jpg" width="750" height="500">
</div>
</div>
css of the banner:
.home-top-box .banner{
position:relative;
height:auto;
width:100%;
display: inline-block;
}
.home-top-box .banner img{
width:100%;
}
Tried changing height to 100%, using min-height - those still didn't solve the problem.
Try changing this so that the parent has an inner padding that matches the image aspect ratio. http://i.imgur.com/2viiD35.png http://i.imgur.com/7k8uszJ.png
.home-top-box .banner {
position: relative;
height: 0;
/* width: 100%; */
/* display: inline-block; */
padding-bottom: 66.6%; /* (500 / 750) * 100 = 66.6% */
}
If you know the image aspect ratio, then you could recalculate your height using jQuery:
$.ready(function(){
$("div.banner").height($("div.banner").width()/750*500);
});
You shold take in account some padding, margins and borders, or make them zero if possible.
Related
Lets say I have a div with width of 100px and I have an image with UNKNOWN width.
Is there any way that I set the image as the background of the div with the following requirements:
If the image is wider than div HIDE overflow from both sides of the image EQUALLY
If the image is smaller or equal of the div make it 100% of the width of the div
A CSS background-image won't afford you this level of flexibility, but you can approximate it with an <img>:
div {
/* We'll be positioning the <img> relative to the <div>. */
position: relative;
/* Don't let an oversized background image stretch out the <div>. */
overflow: hidden;
}
div>img {
/* Since the image is an <img> element and not a background-image,
we don't have to worry about it shrinking, but we do need to
explicitly make it no smaller than the containing <div>. */
min-width: 100%;
/* Don't get in the way of positioning other elements. */
position: absolute;
/* Move the left edge of the image to the center of the <div>, then
shift it back by half the width of the <img>. Result: centered
image. */
left: 50%;
transform: translateX(-50%);
/* It's supposed to be a background image, so put it behind other
content. */
z-index: -1;
}
/* The rest is just for the sake of this example. */
div {
color: red;
border: 1px solid red;
resize: both;
}
<div>
<img src="https://i.stack.imgur.com/xXLKG.png">
Try resizing this <div>!
</div>
background image is not able scale size with container.
Making the content width : 100% of its parent will work here!
.fixSize{
width:500px;
}
.image{
width:100%
}
<!-- Now if i have a large image width:2500px -->
<div class="fixSize">
<img class= "image" src="https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg" alt="Large Image">
</div>
<!-- Now if i have a small image width:256px -->
<div class="fixSize">
<img class= "image" src="https://digitalpadm.com/wp-content/uploads/2017/07/Logarithmic-Image-Gray-level-Transformation-digitalpadm.bmp" alt="">
</div>
Here's an easy fix with JavaScript
Html code
<div id="dv">
<img id="img" src="yourImageSource"/>
</div>
CSS code
#dv {
width: 100px;
height: auto;
min-height: 200px;
overflow: hidden;
border: 2px solid black;
box-sizing: border-box;
}
#img {
height: 200px;
}
JavaScript code
window.onload = ()=>{
var a = document.getElementById("dv");
var b = document.getElementById("img")
var c = a.getBoundingClientRect().width;
var d = b.getBoundingClientRect().width;
if(c < d){
b.style.marginLeft = (c - d)/2 + "px";
b.style.width = "auto";
} else {
b.style.marginLeft = "0px";
b.style.width = "100%";
}
}
I have seen lot of solution about this. The solutions are either for wider or taller image. But my problem is the image which need to keep in ratio, I have no idea it could be taller or wider.
Just give it width: 100% to make it responsive or adjustable to the parent's size:
.square {
width: 400px;
max-width: 100%; /* also make its parent responsive (advisable) */
}
.square > img {
display: block; /* removes bottom margin/whitespace, alternative: "vertical-align: bottom" */
width: 100%; /* responsiveness */
}
<div class="square">
<img src="https://placehold.it/1600x900" alt="img">
</div>
First, please consider this fiddle.
I need to get some links over specific image regions, however those images are scaled according to the parent size...
that's why the link's position and size are relative(percentages) to the image.
But the fiddle shows the problem of this approach.
Is there anyway to get the .image-wrapper to "mimic" the img size and position after scaled?! Any trick or whatever?
Note: I'm OK with webkit-only solutions!
Edit 1
Actually I'm more focused in making the image fit on the content div, then making the image wrapper follow the resulting image size. Here's what I achieved so far...
Now I'm trying to get it working with the image centralized.
Here is the CSS skeleton for a solution.
Suppose your HTML looks like the following:
<div id="content1" class="content portrait">
<div class="panel-wrapper">
<div class="image-wrapper">
<img src="http://placekitten.com/200/250" />
</div>
</div>
</div>
<div id="content2" class="content landscape">
<div class="panel-wrapper">
<div class="image-wrapper">
<img src="http://placekitten.com/300/200" />
</div>
</div>
</div>
The HTML is similar to your original code except that there is an extra wrapper .panel-wrapper.
I used the following CSS:
.content {
background: lightgray;
display: table;
margin: 40px 0;
}
#content1 {
width:100px;
height:150px;
}
#content2 {
width:150px;
height:150px;
}
.panel-wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.image-wrapper {
outline: 1px solid green;
position:relative;
display: inline-block;
}
.content img {
display: block;
width: 100%;
}
.portrait .image-wrapper {
height: calc(100% - 2px);
}
.portrait .img {
height: 100%;
}
.landscape .image-wrapper {
width: calc(100% - 2px);
}
.landscape .img {
width: 100%;
}
.sample-link {
background:rgba(0, 0, 255, 0.3);
position:absolute;
display:block;
width: 50%;
height:20%;
top:5%;
left:5%;
}
I apply display: table to .content and display: table-cell to .panel-wrapper so that I can get a get the image centered both vertically and horizontally.
The .image-wrapper has display: inline-block.
To get the scaling right, you need to consider two cases depending on the aspect ratio of the image.
For portrait images, apply height: 100% to the .image-wrapper and the child img.
For landscape images, apply width: 100% respectively.
If you have a border on .image-wrapper, use the CSS calc() function to adjust for the 2px width of the borders.
What you need to do is use JavaScript/jQuery to determine the aspect ratio of the image and then apply the correct class (.portrait or .landscape) to the .content block.
See demo at: http://jsfiddle.net/audetwebdesign/SZjvJ/
A possible way is to work with image ratio and to adjust link ratio and margins according to image dimensions, with Jquery.
Have a look at this example fiddle: http://jsfiddle.net/t7Ucj/
The Js measures width and height of the image and according to its ratio, it works on the width or on the height of the link.
var width = $('#content2 img').width();
var height = $('#content2 img').height();
//vertical image
if(height > width){
var left = $('#content2 img').css('margin-left');
$('#content2 .sample-link').css({'width': width, 'left' : left});
}
else{
var top = $('#content2 img').css('margin-top');
$('#content2 .sample-link').css({'height': height*0.2, 'top' : top + height*0.4});
}
Then you can wrap all the instructions in a simple function obviously.
I know it can be tricky to put all the possible cases but i had a similar problem and solved in this way.
hope it helps
I have two banner images, each of them has the same height but different width. Each one of them is nested in <a> tag (to make the images open a link) and the <a> tags are nested in <div> tag.
My problem is, I need these two images to sit next to each other and automatically adjust to the width of the <div> tag so that they fill exactly 100% of the <div> width, keeping the ratio of the individual image widths the same. The div tag is fluid (it resizes with the size of the screen) and I'd like these two images to be automatically adjusting so that they always fill exactly 100% of the div width. How do i do this using css.
Here is my html:
<div class='banner'>
<a class='mainBanner' href='Help.php?title=Help'><img src='banner1.png' alt='mainBanner' /></a>
<a class='openAccount' href='Profile.php?title=Registration'><img src='banner2.png' alt='openAccount' /></a>
As long as your images are not dynamic (ie. you know the widths in advance), you could do it like this:
<div class='banner'>
<a class='mainBanner' href='#'><img src='http://placekitten.com/200/200' alt='mainBanner' /></a>
<a class='openAccount' href='#'><img src='http://placekitten.com/300/200' alt='openAccount' /></a>
</div>
.banner {
display: table;
width: 100%;
}
.banner a {
display: table-cell;
}
.banner a:first-child {
width: 40%; /* this image is 200px wide */
}
.banner a:last-child {
width: 60%; /* this image is 300px wide */
}
.banner a img {
width: 100%;
height: auto;
}
The combined widths of the sample images is 500px, so your percentages are 200 / 500 = .4 or 40% for the first and 300 / 500 = .6 or 60% for the second.
I would use percentage and float the images like so DEMO http://jsfiddle.net/kevinPHPkevin/6H4cV/
.clear {
clear:both;
width:100%;
}
.banner {
width:100%;
background:#000;
}
.mainBanner img{
width:70%;
background:#ff0;
display:block;
float:left;
}
.openAccount img {
width:30%;
background:#ccc;
display:block;
}
You'll have to use (or simulate) tables! :D
I didn't touch much of your html. I removed the white-space between the 2 <a> and I enclosed it in another div (with the class derp).
CSS :
div.derp {display:table; border:1px solid green;width:100%}
div.banner {background:light-blue;border:1px solid blue;display:table-row}
a {display:table-cell;border:1px solid red;}
img {display:block;width:100%}
And I made a demo too!
I would use:
.banner {
display: table;
width: 100%;
}
.banner a {
display: table-cell;
}
.banner a img {
width: 100%;
height: auto;
}
this way the two image width can have always different widths, as long as they have the same hight.
demonstration - resize result display to see the effect.
Hope it helped you!
height the same, different widths?
ok, so if you now two widths of this images too just make the percent and float left. For example if one image is 200px wide and another 300px wide just give 40% and 60% for both a (don't forget to add them also display block or even display inline block without float left) and give width 100% for both img's. if you don't know the width, you need to use javascript unfortunately.
very pseudocode because I am really tired.
a1.width = img1.width/(img1.width+img2.width)*100+%
a2.width = img2.width/(img1.width+img2.width)*100+%
and of course a - display:block and img's width:100%.
or something like this if you would like I can write it tomorrow but I am not sure is this answer you are looking for, so I am not doing it now.
So yet another question about vertically aligning an image within a div, but I think mine is different than the others I've found on here. I can't seem to find a solution that works for my situation.
I have a DIV that is 100% width (to it's container, which is floating left and has a set pixel width) and has a set pixel height. I have an image inside that I am positioning absolute to get it to the background of content within the DIV. The image is fluid with a width of 100%.
All works well, but I want to get the image to vertically align to the middle of the container and height is unknown.
Here is some sample code that shows what I'm trying to do:
<div class="container">
<div class="image-wrapper">
<img src="http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg"
width="100%" />
</div>
<p>Some text</p>
</div>
And some sample CSS:
.container {
width:100%;
margin-top:10px;
height:100px;
overflow:hidden;
}
.image-wrapper {
position: relative;
}
.image-wrapper > img {
position: absolute;
z-index: -1;
}
p {
text-align: center;
padding-top: 10px;
color:#fff;
font-weight: bold;
}
But the flower should show up with it's center visible within the container div.
Any thoughts? I'm trying to avoid any Javascript sizing (the outer container, not shown in this sample, is already being sized). I'm not opposed to more DIVs, tables.. whatever you got!
A jsFiddle to demo this:
http://jsfiddle.net/JonMcL/sNz9h/
Why not go for the background-image property? That allows vertical centering...
http://jsfiddle.net/urrWS/
Assuming you want to only scale the image down and not stretch it beyond its native resolution this should do the trick. A little bit of jQuery is involved but it's minimal. Essentially, this adjusts the top-margin of the IMG on the window.resize event.
HTML
<div id="container">
<img id="image" src="image.jpg"> <!-- native size is 480x300 -->
</div>
CSS
#container {
margin: auto;
width: 80%;
height: 300px;
border: 1px solid gray;
}
#image {
display: block;
width: 100%;
max-width: 480px;
margin: auto;
}
jQuery
function adjustImage() {
$("#image").css('margin-top', ($("#container").height() - $("#image").height()) / 2);
}
$(window).load(function() {
adjustImage();
$(window).resize(function() {
adjustImage();
});
});
If I get what you need I would suggest setting the background image via css, then you can set the position correctly etc.
.container {
width:100%;
margin-top:10px;
background-image:url("http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg");
background-repeat:no-repeat;
background-position:left center;
height:100px;
overflow:hidden;
}
http://jsfiddle.net/sNz9h/6/