Hi I'm trying to fit a image into a ion-card-header, but the image doesn't fit.
I already tried to remove padding, margin and use background-size: cover.
<ion-card>
<ion-card-header no-padding>
<ion-img [src]="filter.url" no-margin no-padding style="width: 100%;"></ion-img>
</ion-card-header>
<ion-card-content>
<p text-center>{{filter.name}}</p>
</ion-card-content>
</ion-card>
So I want, is that the image stretch if it's small than the ion-card-header, to fit it's size, regardless of the device display.
I found the solution!!
I use a media query to set the height that i want and I use object fit (that I didn't know that exist!).
So stayed like this:
.image--size {
width: 100%;
height: 65.66px;
object-fit: cover;
}
Related
This is how it looks now. But I need to make preview on full width and height. How can I do that?
Tried to change it's css
<div
data-v-68d5c99c=""
class="app-sidebar-header__figure app-sidebar-header__figure--with-action"
style="background-image: url("/index.php/core/preview fileId=4994&x=1536&y=864&a=true");"
></div>
By adding background-size: cover; I made it full width. But adding height: 300px; doesn't change it's height. Is it possible to fix it?
When creating an AMP Carousel, how do I make sure that pictures with different proportions stay contained in the same way? In other words, the pictures will display width: 100%, but the height will be cut in relation to the proportion of the picture.
You can achieve this combining a fixed-height layout for the amp-carousel with a fill layout for the amp-img:
<amp-carousel height="300"
layout="fixed-height"
type="slides">
<div class="fixed-height-container">
<amp-img class="contain"
layout="fill"
src="https://unsplash.it/500/400"></amp-img>
</div>
The trick is to use object-fit: contain|cover for the embedded img:
.contain img {
object-fit: cover;
}
Here is a sample.
I'm trying to use fluid images for a responsive project I'm working on. However, everything I've seen has just told me to put a max-width for the images and it should work. It does work, except for px-based container widths as seen here: http://codepen.io/anon/pen/cCfsF
Is it possible for px-based parents to have fluid images?
My HTML code is:
<div class="container">
<img src="https://www.google.com/logos/doodles/2013/franz_kafkas_130th_birthday-1976005-hp.png" />
</div>
<div class="container2">
<img src="https://www.google.com/logos/doodles/2013/franz_kafkas_130th_birthday-1976005-hp.png" />
</div>
and my CSS is:
.container {
width: 500px;
background: #f30;
}
.container2 {
width: 100%;
background: #f30;
}
img {
max-width: 100%;
}
In your example, .container has a fixed width of 500px, and the child images has a width of 100%, so the image will scale to fit the parent container. However, since .container has a fixed width, it will not change as you shrink or expand the window.
As you observed, for the case of .container2 with a percentage width that will respond to the window width, the image will re-size accordingly.
You are seeing the correct behavior, so the short answer to your question is no, at least for the layout that you are looking at.
I have a narrow view that I am inserting some HTML into. Every once in awhile there is an image that is too wide, so I have been wrapping the original HTML string, using this CSS to keep it under control:
<style type="text/css">p{max-width:100%;}img {max-width:100%;}</style>
<div style=\"word-wrap:break-word\">
.
. ...original HTML inside the div wrapper...
.
</div>
But it doesn't scale the width and height of the images proportionally, so the result is a very distorted image. Is there something else I can do, preferably with CSS or something equally as easy?
This is embedded inside a webview in an iOS application. I don't want write code to parse through the original HTML and look for images. I need a simple solution that takes advantage of the methods that are supported by the native UIView class.
UPDATE:
Using the example in the answer below from Kyle, I think the problem is occurring with images that have embedded width and height attributes:
Kyle's example:
<div style="word-wrap:break-word">
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">
</div>
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">
Modified, with width and height added to the first image link
<div style="word-wrap:break-word">
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png" WIDTH="100%" HEIGHT="100%">
</div>
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">
Both using this CSS:
div {width:100px;}
p{max-width:100%;}
img{max-width:100%;}
It really isn't making any difference whether the container width attribute is set or not. I tried it both ways.
As a matter of fact, in this case (link) it looks like the image is first scaled up by the width and height attributes, followed by the width being scaled down by the CSS max-width. This leads a a very bizarre effect.
To maintain the right proportions use:
img {
max-width: 100%;
height: auto;
}
The height: auto fixes the proportions.
It's really easy, just add a width to the parent.
div
{
width: 100px;
}
Demo here.
I am not sure if I understood right your question, but here is an idea:
http://jsfiddle.net/FyC6r/4/
.mydiv
{
width:200px;
height:150px;
border: 1px solid red;
}
.mydiv img
{
width:100%;
}
<div class="mydiv">
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">
</div>
this way you'll have a image resized proportionally dependson what you need first, the width or height.. leaving only width 100% in css it means that image will be resized to fit the div by width and height will be resized the same times as the width so the scale will be respected.
well..if want them resized by width and height then you'll have a image distortion due to different scale. you can paly with width and height of img style to change them and fit one image, but when another one is added with different sizes you'l get again a wrong displayed image. I would go for width to keep it resized, cause in the height, there is always space under the screen :)
**you should add display: inline-block and overflow: scroll to make it work **
for more examples click Here .
.demo{display: inline-block;
max-width:380px;
min-width: 220px;
min-height: 160px;
resize: both;
overflow: scroll;};
<div class="demo">i'm resizeble</div>
Here is the css code I am using:
#wrapper{
position:relative;
width:950px;
margin-left:auto;
margin-right:auto
}
#content {
text-align: left;
padding: 0px 25px 0px 25px;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 50%;
/*half of width of element*/
margin-left: -450px;
height: auto;
}
And this is the site: http://projectstratos.com/31-01-11/
Please ignore the social icons and the height issues.
To see what I mean make your browser smaller and bigger. The text moves to the right while the background image stays centered. How can I fix this?
I don't believe there's an actual 'fix' for the problem you're presenting.
When you say that the text 'moves to the right' in reality- the text is not moving at all.
Your background image is just trying to maintain itself in the center of the horizontal axis- which you're changing.
For example.. If you got Bungie's website http://www.bungie.net/Projects/Reach/default.aspx and you perform the same action. You'll get the same 'effect' that you are. The only difference is that the background of the text in their website isn't a part of the background image.
Here's what you need to do in order to 'fix' you're problem.
Separate the background (planet, space, etc..) from the logo, purple box etc.
Keep the space, planet, etc.. in the same spot as the background image that's there now.
Take the purple box and put it in it's own div that wraps around all your content
You're code will look similar to this:
<body>
<div id="purpleboxbackgroundimage">
<div id="contentandtext">
<h1>jhkljhlkjhlkj</h1>
</div>
</div>
</body>
I hope this helps.