how to hold the image size when src not exists? - html

<img class="holder-image" src="" ng-click="onAvatarClick()">
like this, when the src not exists, I want to hold the size with a border or other images, what should I do ?
I fetch src of images from Internet, but some src doesnt work, it would show a small err image, I dont care what image is , I just want to keep the size designed.

Use the following tag:
<img src="yourimageifany" id="imageid" />
Set CSS as follows:
img{
width: 100%;
border: 1px solid #000;
border-radius: 5px;
}
You can get the image width as follows (using JQuery on load):
$(window).load(function() {
var width= $("#imageid").width(); //get width
$('#imageid').height(width); //set height as width
});

You can use the following line:
<img class="holder-image" src="" ng-click="onAvatarClick()" height="200px" width="200px" />
This will set the height & width of your image as 200px

Related

Scale an image only by width or height

I have an image:
<img src="#" width="42" >
If I set only the width, Firefox and IE will scale also the height, but Chrome doesn't it keep the initial image height. Can Chrome behavior be fixed ?
If I set just the height is not taken in consideration. Can an image be scaled by height ?
Setting height to auto should work. For example:
<img src="#" width="42" height="auto">
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.
This will work for all modern browsers and works for both % and px, em sizes ect.
See W3schools
Or using inline styles:
<img src="#" style="width:42; height:auto;">
Edit: I'm not sure you did not mean give height a value and make width resize automatically. In which case width: auto should do fine.
Instead of letting HTML do the work, let CSS do it.
Change :
<img src="#" width="42" >
To :
<img src="#" style="width: 42px; height: auto;">
That will allow CSS to resize the image.
.img
{
width:auto;
height:auto;
}
You can define width and height in css

adjust image to fixed content

I'm dealing with img tags which are have a fixed width & height.
The question is that a have a set of images that each one has its own dimensions, so in the resulting view, some of them vary in height keeping the width constant.
This is what I get:
... and this is what I want to accomplish:
Is there any way that whatever image is loaded in the img tag keep proportions and be all with the same height?
you can use css and set the property of width and height to what ever you want
img
{
width : 150px;
height : 150px;
}
<img src="https://static.pexels.com/photos/57825/pexels-photo-57825.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/149941/pexels-photo-149941.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/163145/laptop-computer-coffee-yellow-163145.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/7107/notebook-hero-workspace-minimal.jpg" alt="no image available" />
Please try the following:
1. Put the images into 'div's
Eg.
<div class='image-container'>
<img src="yourimage.jpg">
</div>
adjust the height of the in the stylesheet:
.image-container img{
width:100%;
height:100%;
}
adjust the width of the 'div's to fill quarter of the page:
.image-container{
width: 25%;
}

Image placeholder for clients own branding image

I currently have a banner, that is 100% wide, but with limited height. Say 100px;
I would like to have my clients put in their branding image in a certain directory, where the browser already looks for this image.
If the image is not found, nothing is displayed, and its business as usual.
If the image is found, then the image is displayed.
At the moment, my code displays an image to indicate that there is supposed to be an image that could not be loaded.
codepen:
#banner {
background-color: aliceblue;
width: 100%;
height: 100px;
}
<div id="banner">
<img src="/images/myImage.jpg"/>
</div>
HTML Based solution
<object data="o.png" type="image/png">
<img src="" />
</object>
https://jsfiddle.net/pratikhegde/mskLf844/
Jquery Based solution:
This works after DOM is ready
$('img').error(function() {
$(this).hide();
});
https://jsfiddle.net/pratikhegde/k5uo4efh/

Img set to max-width: 100% is publishing larger than the actual image size?

This is driving me bonkers. In my CSS is this code
img {max-width:100%; height:auto; }
But when I upload an image to the blog post that is 200x200
<img width="200" title="photo-Trent-Dysmid.jpg" style="width: 200px; float: right;" alt="photo-Trent-Dysmid.jpg" src="http://inboundmarketing.digitalhive.buzz/hubfs/jan-2016-images/photo-Trent-Dysmid.jpg" data-constrained="true">
And then preview the blog post, it is publishing it at 798x798, basically to the full width of the blog page. The only way I can get it to display at the right size is by manually changing "width: 200px" to "max-width: 200px" but what a drag to have to do that every time! What am I doing wrong?
Thanks!
Rebekah
max-width: 100%
The percentage value will refere to the width of the container the img-element is in, and not the picture itself!
Example:
<div style="width: 500px"><img src="..." style="max-width: 100%" /></div>
So if the container has a width of 500px, the img-element will have a max-width of 500px as well
You could set a custom max-width fitting the image using JavaScript and the image.onload event:
<img onload="this.style.maxWidth = this.width + 'px'" src="..." />

How can I have a textarea take up the remaining height in a div?

I have a set of code as per below. The point is to have a set of images be in the div, and the remainder of the div is populated with a textarea. If I set the height = 100%, it will make it the same height, which isn't the (div.height - images.height) and makes the textarea longer.
It says on w3c that inherit doesn't work at the moment, auto will just make a default textarea, and hardcoding it will never accomplish it as the div could be bigger or smaller.
What have you all done to accomplish this?
<div id = "parent">
<div id = "images" style="background-color:#99ccff;">
<img style = "padding:0px; border:0px;" src = "..." />
<img style = "padding:0px; border:0px;" src = "..." />
<img style = "padding:0px; border:0px;" src = "..." />
<img style = "padding:0px; border:0px;" src = "..." />
<img style = "padding:0px; border:0px;" src = "..." />
<img style = "padding:0px; border:0px;" src = "..." />
<img style = "padding:0px; border:0px;" src = "..." />
</div>
<textarea style="width:100%; height:100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;" >
</textarea>
</div>
Seems to be impossible to get this behavior work in other browsers than chrome.
I've tried to split the pictures and textarea in two CSS table-rows to give #images a height so that #textarea-container automatically adjust its height. The next step was to give textarea 100% height and 100% width.
Absolute positioning an element in a relative positioned table cell is not supported: CSS Positioning inside of an HTML Table
So textarea { position: absolute; left:0;right:0;bottom:0;top:0 } in a relative positioned table cell will not work.
HTML
<div id ="parent">
<div id="images">
<img src="http://www.dummyimage.com/100x20/cc5acc/fff.png" />
<img src="http://www.dummyimage.com/80x20/cc5acc/fff.png" />
<img src="http://www.dummyimage.com/20x20/cc5acc/fff.png" />
<img src="http://www.dummyimage.com/80x20/cc5acc/fff.png" />
<img src="http://www.dummyimage.com/100x20/cc5acc/fff.png" />
<img src="http://www.dummyimage.com/120x20/cc5acc/fff.png" />
<img src="http://www.dummyimage.com/50x20/cc5acc/fff.png" />
</div>
<div id="textarea-container">
<textarea></textarea>
</div>
</div>​
CSS
* { margin:0; padding: 0 }
#parent{
width: 400px;
height: 300px;
display: table;
background: blue;
}
#images {
display: table-row;
height: 0;
}
#textarea-container {
display: table-row;
}
textarea {
height: 100%;
width: 100%;
}
! This solution depends on display: table, display: table-row and Google Chrome.
Live demo (works only in google chrome): http://jsfiddle.net/atTK7/4/
Display table support: http://www.quirksmode.org/css/display.html
A Javascript workaround for browsers, except for chrome, is recommended.
I'm not very good at using it, but you may wish to try display:box;. I have an example here that does what (i think) you want, but with the 'main bug' being that you can no longer re-size the textarea (but if that's not and issue, you can change resize:none;).
Maybe it is a problem with your browser. I just tried your code and seems to do what you wanted: http://jsfiddle.net/Rorok_89/DMdyY/1/
Even if I don't know clearly what you want to do, you can use jQuery to help you to get the size of actual elements, and force your textarea to expand or reduce. This should help you:
<script type="text/javascript">
var max_div_height = 1000; //The max height of your div in pixels
var total_div_height = 0 // The total height of your divs combined
jQuery(".container").each(function(){
var context = $(this);
var height = context.height();
total_div_height+=height; //If it's width, set height otherwise
});
var textarea_size = max_div_height - total_div_height;
jQuery("#myTextarea").css("height", textarea_size+"px") // Give an ID to your textarea
</script>