I am trying to change the width and height of the image tag in angularjs, but the following crops the image instead of re-sizing it. I tried the ng-image-resize but in vain.
ng-src="{{imageInfo.DecachedImageUrl}}" style="width:380px ; height:295px"
This is the same in HTML as with angular. Simply use the width/height attributes instead of style.
ng-src="{{imageInfo.DecachedImageUrl}}" width="380px" height="295px"
Related
I'm using HTML5's <picture> tags to create a responsive header that will stretch the entire width of the browser. The header uses an image as the background.
For larger screens I limited the height to a defined value. However, I noticed that a certain breakpoint the image starts to stretch and distort the image.
I'm familiar with using CSS's background-image: url(); to create a mask in order to prevent the distortion, but I don't know what best practices are with <picture>.
My code currently stretches and distorts the image. Is there a way to 'mask' the image?
First thing you should know is that if you will give height to any image then in some screens it will stretch.
So instead of giving the height you should take the image of exact size it will do the thing.
If you can share the code I can fix it and send it to you.
Hope it helps.
User zgood was able to lead me in the right direction. Adding object-fit: cover to the <picture>'s <img> tag got the job done.
I'm making a strictly html5 page for class and we're not allowed to use CSS yet. Is there way to make an image responsive with plain html tags?
Yes, you can set the width="N%" and the image will resize based on the width of the browser window. So 100% will fill the screen, 50% will fill half, etc.
I want to make a few letters in a tag to fit the entire height of the browser window, kinda like so http://flavinsky.com/work/suspended-animations (Notice the 04).
But instead of using an svg image I want to use real text.
Is this possible? If so how do I do it?
use css atribute
font-size:100vh;
Learn more
I admit in the beginning that I am new to UI development and started learning recently. I am developing a website which i similar to InuitLabs.com. When I looked at the source code using view source I am totally lost. Particularly I am interested in knowing
How the slider image on the homepage is responsive? Is it through javascript or using pure css.
Also I want to know the text moves upwards on scrolling leaving behind the background image intact? How to achieve the same effect.
I know this might be the basic question but I found it hard to know through the source code as there are many javascript and css files.
Regards,
Pradeep
Take a look at the background-size property.
you can set background-size to any px or % value or use constants:
cover will adjust the image size to fill the entire container while contain try to fit the image inside the container without cropping it, most likely leaving some parts of the container without any background.
What you probably want is to set your background-size property to cover.
you just set the image to the percent you want in % through css for example:
.slider img {
width:100%;
}
edit: also you need to specify the height as auto, if you do not want to lose the image ratio. if you set width and height at 100% the image ratio will be messed up.
if you want to set responsive height also for longer device then use width:100%; and height:100%; other wise you can use height:auto; make div and keep it background-size property for it.
I would like to resize an image on my website. I know how to do it by either resizing the image before or calculating the width and height and setting the values in pixels. But I use the same picture multiple times with different dimmensions, so it would take me less time if I could resize the image relatively to its own size.
<img src='images/logo-beta.png' id="logo" height="75%" width="75%"/>
I have tried this, however the problem is that the size is set relative to its parent element.
There's no way to do what you want automatically using HTML or CSS alone. You'll need to use JavaScript to get the image's dimensions, then calculate a percentage of those dimensions and reapply them to the image in pixels
There is a method, but it isn't perfect. It requires a wrapping element whose display is set to 'inline-block' and the image is resized using 'max-width'.
The issue is that the parent element retains the image's original width, which could cause problems depending on your requirements.
Example: http://jsfiddle.net/amustill/GnEw5/