I used p_galleria of PrimeNg and set this attributes :
<p-galleria [images]="productImages"
panelWidth="560"
panelHeight="313"
autoPlay="false"
showFilmstrip="false"
id="product-galley"
showCaption="false">
</p-galleria>
also I added an style for rendered image panel :
.ui-panel-images {
/*height: inherit !important;
width: inherit !important;*/
/*max-height: inherit !important;
height: initial;
max-width: inherit !important;
width: initial;*/
max-width: 100%;
max-height: 100%;
width:auto;
height:auto;
}
But the image is always stretched in container, I want it to be fixed in scale. and be in center of panel.
Is there any idea how to change the style?
Maybe its not relevant, but I wrapped this gallery in a
bootstrap-modal.
Using primeng v6.0.0, I added this to my CSS to make the image resize itself, keeping the aspect ratio, to match the dimensions of the p-galleria container.
.ui-panel-images {
width : 100%;
height : 100%;
object-fit : contain;
}
<div class="col-md-5">
<p-galleria [images]="imagesGaleria"
styleClass="completa"
[showFilmstrip]="false"
[showCaption]="false"
effectDuration=2000></p-galleria>
And my css, there are some properties that you can remove
.completa {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;}
.ui-panel-images{
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
/*z-index: -100;*/
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
/*background-size: cover;*/}
Neither of the previous solutions worked for me. My solution for a responsive galleria panel was to size a responsive container element and fit the panel attributes to the container:
<div #container>
<p-galleria [panelWidth]="container.offsetWidth"
[panelHeight]="container.offsetHeight"
[images]="images"></p-galleria>
</div>
What was especially helpful in my case, was to set my container to 100% width, and calculate an aspect ratio to match my images. Note, you don't need to set a container height in this method. Optionally, you could add more height if you're showing a filmstrip:
<div #container>
<p-galleria [panelWidth]="container.offsetWidth"
[panelHeight]="container.offsetWidth * (5/16)"
[images]="images" [showFilmstrip]="false"></p-galleria>
</div>
For the object-fit to work, I had to override the view encapsulation like so:
:host ::ng-deep img.ui-panel-images {
object-fit: contain !important;
height: inherit;
width: inherit;
}
Refering to near perfect answer of user sawprogramming. The code should be wrapped in
:host {
::ng-deep {
.ui-panel-images {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
I tried this and it worked fine.
` .ui-panel-images {
width: auto;
height: inherit;
object-fit: contain;
position: relative;
}
`
Related
How can an image fill the parent container height, and retain the aspect ratio?
I have used a similar pattern before (see below), but I believe that Bootstrap 4 may be interfering here. When viewing the image in a mobile view port, the image is stretching vertically.
div#parent { position: relative; }
h1 { color: #FFF }
img#child {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -100;
}
<div id="parent">
<img id="child"
src="https://cdn.pixabay.com/photo/2016/07/08/08/59/background-1503863_1280.png" alt="Background" />
<h1>Very very very very very very very very very very very long heading
to go over image in mobile view. The image should not stretch
vertically.</h1>
</div>
Add background-size: contain; to your CSS
img#child {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -100;
background-size: contain;
}
Output:
For more info: https://www.w3schools.com/csSref/css3_pr_background-size.asp
I tried to make a shape using div and put an image inside. I want the image to maintain its default shape (rectangle or square) without skewing, but when I put image inside, the image skewed with the div. For the div shape I am using transform: skewY(-10deg);
.intro {
width: 180px;
height: 400px;
/* border-radius:50%;*/
cursor: pointer;
position: relative;
background: #fff;
transform: skewY(-10deg);
margin: 35px 35px 35px 0px;
}
.intro img {
width: 100%;
height: 100%;
}
<div class="intro">
<img src="http://lorempixel.com/180/400/sports">
</div>
You are trying to accomplish this: distort the shape of the outer object but keep the inner shape the same. The only way to do that is to transform the inner shape by the negative of the outer shape transform (aka, if your skewY(10deg) on the outer shape, do skewY(-10deg) on the inner), then hiding the overflow.
See this snippet:
.intro {
width: 180px;
height: 400px;
cursor: pointer;
position: relative;
background: #fff;
/* I added the -webkit- prefix as I'm using Safari 8 and
* it wouldn't show up otherwise. Might want to prefix that! */
-webkit-transform: skewY(-10deg);
transform: skewY(-10deg);
margin: 35px 35px 35px 0px;
overflow: hidden;
}
.intro img {
width: 100%;
height: 100%;
-webkit-transform: skewY(10deg);
transform: skewY(10deg);
}
<div class="intro">
<img src="http://lorempixel.com/180/400/sports">
</div>
An annoying sideeffect of this is that your contents will seem cut off. The only way to solve that is to make the inner shape larger than the outer shape an potentially padding the inside. For your image, I'd suggest:
.intro {
position: relative;
}
.intro img {
/* Use min width and heights higher than 100%
* (you might need to experiment here as it depends
* on the angle you chose for your skew) to fill
* the outer shape completely. */
min-width: 110%;
min-height: 110%;
/* Position the element absolute and 50%
* from the top and left */
position: absolute;
left: 50%;
top: 50%;
/* Now add a transform to it to move it with
* half of its width and height, therefore centering it. */
-webkit-transform: skewY(10deg) translate(-50%, -50%);
transform: skewY(10deg) translate(-50%, -50%);
}
Now you could also do width: 110%; height: 110%; left: -5%; top: -5%; and it would accomplish similar results. Play around with it.
Update
As per #vals suggestion, it might be a lot simpeler to just use the scale transform instead of all the positioning mumbo jumbo. Its always the simplest solution thats easiest to overlook:
.intro img {
-webkit-transform: skewY(10deg) scale(1.2, 1.2);
transform: skewY(10deg) scale(1.2, 1.2);
}
I am trying out the new features in css3 while i found that rotateY() and rotateX() is not giving expected results.
I have a single div in the page
<div id="element"></div>
This is the css
#element{
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
top: 300px;
background-color: yellow;
transform: rotateY(45deg);
}
The blue shape is what i want and yellow is what i get
You need to add a container and give it perspevtive: 500px to get a 3D looking effect.
#container {
-webkit-perspective: 500px;
perspective: 500px;
}
#element {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
top: 10px;
background-color: yellow;
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
<div id="container">
<div id="element"></div>
</div>
You may want to complete your transform and perspective style rule:
jsfiddle demo
body{
-webkit-perspective:200px;
-moz-perspective:200px;
perspective:200px;
-webkit-perspective-origin:center 400px /* 300px + 200px/2 */;
-moz-perspective-origin:center 400px /* 300px + 200px/2 */;
perspective-origin:center 400px /* 300px + 200px/2 */;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
}
#element{
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
top: 300px;
background-color: yellow;
-webkit-transform: rotateY(45deg);
-moz-transform: rotateY(45deg);
transform: rotateY(45deg);
-webkit-transform-origin:center;
-moz-transform-origin:center;
transform-origin:center;
}
<div id="element"></div>
The parent of #element (not necessary <body>) has to have:
perspective so your browser knows how "far" the viewport is from #element, and render the rotation effect accordingly;
perspective-origin so your browser knows where the "center" of your viewport is;
The transform-style:preserve-3d do not seem to be necessary in this specific case, and IE doesn't support this feature yet. I just added it out of habit.
I'm trying to make a responsive, full width image work inside a narrow parent. So far, I can't clear these elements.
Javascript is ok, but fussing with the HTML isn't since it should work in a WordPress theme.
HTML:
<p>Visible content.</p>
<div class="feat-img">
<a href="#">
<img src="http://f.cl.ly/items/1e1515393T2l0D3I2503/feat-img.jpg"/>
</a>
</div>
<p>Hidden content :( </p>
</article>
CSS:
.feat-img img{
position: absolute;
width: 100% !important;
min-width: 400px;
min-height: auto;
height: auto;}
.feat-img img:empty{
left: 50%;
-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);}
article{
width: 50%;
margin: auto;
background:#ccc;}
Live: http://jsfiddle.net/wzvLa/4/
I think it can not be don only with css, because when you set position: absolute to img it's parent no longer contain it. You can write a little javascript code to do that:
$('.feat-img').css({ height: $('.feat-img img').height() });
This way you set the height of .feat-im to be the same as the image in it. Don't forget to do it on $(window).resize() too, so it can be responsive.
Here is what I do: jsfiddle
Here's one way of doing it:
html,body { margin: 0; }
.feat-img img {
position: relative;
width: 133.33%; /* (100% divided by article width) */
min-width: 400px;
height: auto;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
article {
width: 75%;
margin: auto;
background: #ccc;
}
(jsfiddle demo)
I've got a problem with a div whichis used as a overlay/"popup". I want it to use a max-width of 90% if needed. Unfortunately it always uses around 50% although theres more then enough text to fill the whole screen. But instead of using the width (too) it only stretches it vertically (which is fine). I am trying to avoid a absolute width-attribute because i want some kind of "width: auto;".
These are the relevant/applied styles (copied from the developer console):
element.style {
display: inline-block;
opacity: 1;
}
#media (min-device-width: 1000px) {
.Dialog_window {
max-height: 90%;
max-width: 90%;
width: auto;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transition: translate(-50%, -50%);
-o-transition: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
}
.Dialog_window {
background-color: #EEE;
padding: 20px;
border: 1px solid #FFF;
position: fixed;
overflow: auto;
z-index: 100000;
left: 50%;
top: 50%;
}
html {
font-size: 100%;
}
html {
font-family: sans-serif;
}
the Dom-Element is declared like this:
<div id="myID" class="Dialog_window" style="display: inline-block;"> [...] </div>
Thank you for any help in advance!
Regards
max-width and max-height tell the browser, "take up as much space as you need, but not any more than [x]". You're not forcing the element to occupy 90%, you're saying, "Not more than 90%". Unless you have enough content in the element to take up this space, this is the wrong property to style.
you may want to try using min-width and min-height, as these tell the browser, "starting at [x], take up this space".
since 90% of an absolutely positioned element is a lot of space, why not just stick with a fixed measurement, like width: 90%; max-height: 90%;?
.Dialog_window {
max-height: 90%;
width: 90%;
transform: translate(-50%,-50%);
}
If you need a flexible window, that sits within ranges, you should use both min-width and max-width:
.Dialog_window {
min-height: 50%;
max-height: 90%;
min-width: 50%;
max-width: 90%
transform: translate(-50%,-50%);
}