How do I make this div responsive in height ?
<style>
.full1 {
margin-bottom: 10px;
margin-top: 10px;
width: 100%;
height: 225px;
}
.left1,
.middle1,
.right1 {
float: left;
width: 33%;
height:100%;
}
</style>
<body>
<div class="full1">
<div class="left1" >
<img class="left-image" src="http://s16.postimg.org/nc57l3p8l/1_screen_shot_2014_08_24_at_12_43_26_pm_medium.jpg" />
</div>
<div class="middle1">
<img class="left-image" src="http://s16.postimg.org/wl7dv7y4l/windows_9_logo_01_medium.jpg" />
</div>
<div class="right1">
<img class="right1-image" src="http://s16.postimg.org/ig6675eh1/windows_9_logo_08_medium.jpg" />
</div>
</div>
</body>
Here is the fiddle: http://jsfiddle.net/k07gg3pv/.
The images get resized by width but the height leaves large blank space when zoomed.
You have to set the width / height for the images:
.full1 img {
width: 100%;
height: 100%;
}
(here is your fiddle for that: http://jsfiddle.net/k07gg3pv/3/)
This will make the images fit exactly. But this isn't a good solution because your images won't have the proportions they should have. So you have to decide whether you want to fit exactly 100% in width or exactly the height, you won't get proper images and both.
So you have to set one value (width or height) for the images:
.full1 img {
width: 100%;
}
(here is your fiddle for that: http://jsfiddle.net/k07gg3pv/4/)
Related
I want to make a hover animation effect in scss. The idea is when cursor hover on the card, another hidden card appear on top of the hovered card.
But now I got stuck on making the hidden card scss: I am not sure how to make the card the same size and the same position as the bottom card(dark blue card). It is for the className "card-hover"
Below is the code for js:
<div className="gallery">
{data.map((item)=>
<div className="card-holder" key={item.id}>
<div className="card-head">
<img className="card-img" src={item.image} alt="project item" />
</div>
<div className="card-body">
<h2 className="item-name">{item.title}</h2>
<div className="item-date">{item.year}</div>
</div>
<div className="card-hover">
<div className="item-role">{item.role}</div>
<div className="item-type">{item.type}</div>
<div className="item-decs">{item.desc}</div>
</div>
</div>
)}
</div>
Code for scss:
.gallery{
margin-left: 10rem;
margin-right: 10rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 8px;
justify-content: center;
}
.card-holder{
border-radius: 4px;
margin-top: 1rem;
background-color: $darkBlue;
box-shadow: 0px 8px 56px rgb(15 80 100 / 16%);
}
.card-hover {
position: absolute;
background-color: #D62839;
display: inline;
width: 100%;
height: 100%;
}
The current result:
enter image description here
I have looked through tutorial videos of how to make this kind of hover effect, but all solutions so far were to set
width:100%;
height:100%
or
top:0;
bottom:0;
left:0;
right:0;
However, when I tried them the result is like the screenshot above. Can someone help me with this? Thank you
When I add the filter property on a PrimeNg (7.x) p-tree it works as expected but I have a double scroll bar.
The implementation is not special
<div class="row" *ngIf="formControls.wantThemes.value">
<div class="col-4 app-notif-edit-label"></div>
<div class="col-4 app-notif-edit-content">
<h4>Themes</h4>
<p-tree
[filter]="true"
class="app-notif-p-tree"
[value]="cmtyThemesTreeNodes"
[(selection)]="selectedCmtyThemesTreeNodes"
selectionMode="checkbox"
(onNodeSelect)="nodeSelectThemes($event)"
(onNodeUnselect)="nodeSelectThemes($event)"
>
</p-tree>
</div>
</div>
I have applied the following css to limit the size of the box
.app-notif-p-tree .ui-tree {
color: $sinapseBlue;
display: block;
font-size: medium;
height: 100%;
margin: 2% auto;
max-height: 250px;
min-height: 250px;
overflow: auto;
white-space: nowrap;
width: 97%; }
If I change the overflow to hidden, I don't see the last element of my list.
Any idea why? Thanks
I have added .app-notif-p-tree .ui-tree .ui-tree-container { height: 80%; }
I'm trying to build an "off canvas menu" like that on www.bikepacking.com,
but I'm struggling with using this in a container.
I use Bootstrap with QuantumUI and without jQuery.
My approach is something like this:
<div class="container wrapper">
<rw-navigation>
</rw-navigation>
<div class="brandbar">
<input type="checkbox" id="nav-trigger" class="nav-trigger"/>
<label for="nav-trigger"></label>
</div>
<div class="content">
<header>
</header>
<div ui-view=""></div>
<footer>
<p>© 2015 {{'footer.copyright' | translate}}</p>
</footer>
</div>
</div>
With some styles like this:
div.container.wrapper{
position: relative;
overflow: hidden;
.navigation{
position: absolute;
top: 0;
bottom: 0;
height: 100%;
left: 0;
width: 256px;
#include transition(left, 0.5s, ease);
background: #111;
color: white;
}
.brandbar{
position:absolute;
top: 50px;
left:0;
#include transition(left, 0.5s, ease);
}
.content {
overflow: hidden;
position: relative;
width: auto;
bottom: 100%;
left: 0;
}
}
The .navigation class is applied in the template of the rwNavigation directive with replace: true.
It doesn't work and I don't know why.
OK,
Now I got some tima at work for that problem.
THX# Sitepoint for this tutorial which gave me the right direction:
http://www.sitepoint.com/pure-css-off-screen-navigation-menu/
BUt I had to change form position:fixed to position:absolute, because position:fixed only refer to the window and position:absolute refer to prant position:relative element (or windows if there isnt a parent postion:relative element)
And here is a plnkr with the solution for a boxed off canvas menu
http://plnkr.co/edit/OdkXXkhGzKLd0qi2RZ4h?p=preview
I'm using ion-slide-box, but the issue is, my ion-slides image is not in the same size, its dynamically repeated different size image using ng-repeat
<ion-slide ng-repeat="sliderimages in sliderimages">
<img src={{sliderimages.url}} style="width:100%;height:auto;"/>
</ion-slide>
</ion-slide-box>
I used this CSS to fit image height to all
.slider {
height: 200px;
width:100%;
}
.slider-slide {
color: #000;
background-color: #fff;
height: 100%;
width:100%;
}
but the height is not so fit
I have to add any size of images and that to be fit in the Ionic slider.
max-width: 100vw !important;
max-height: 100vh !important;
this worked for me ;-)
Do not apply an explicit width or height to the image tag. Instead, give it:
max-width:100%;
max-height:100%;
Example: http://jsfiddle.net/xwrvxser/1/
Regards.
sorry I know similar questions have been asked but I still can't work it out. I want the images in the body to be centered but only when the aspect ratio means that there is white space on the right hand side, I have tried using margin: 0 auto but to no avail.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="landscape">
<img class="topslide" src="images/background/topslide.jpg"/>
<img class="middleslide" src="images/background/middleslide.jpg"/>
<img class="bottomslide" src="images/background/bottomslide.jpg"/>
</div>
<div id="portrait">
<img class="topslide" src="images/background/topslideland.jpg"/>
<img class="middleslide" src="images/background/middleslideland.jpg"/>
<img class="bottomslide" src="images/background/bottomslideland.jpg"/>
</div>
</body>
And here is my css:
html{
margin:0 auto;
width:100%;
}
body{
margin:0px auto;
height: 100%;
width: 100%;
background: url(../image/background/background.jpg) ;
}
#media screen and (orientation:landscape) {
#landscape {display:block;}
#portrait {display:none;}
}
#media screen and (orientation:portrait) {
#landscape {display:none;}
#portrait {display:block;}
}
#landscape{
margin: 0 auto;
}
#portrait{
margin: 0 auto;
}
img.topslide{
display:block;
max-width:100vw;
height:33.3vh;
}
img.middleslide{
display:block;
max-width:100vw;
height:33.3vh;
}
img.bottomslide{
display:block;
max-width:100vw;
height:33.3vh;
}
I'll be grateful for any help, thanks.
It seems like you misunderstood what margin: 0 auto does. It doesn't center the contents of an element; it centers the element itself.
Give your #landscape and #portrait their own width, or apply margin: 0 auto to the images. Either you'll center the images or their containers. Or both, should you find it necessary.
An alternative approach to center the images would be to display your images as inline-block and apply text-align: center to their parents.