I just got into Angular Material! Now I created a project and I'm trying to stack GridLists on each other. (Let's say for a grid based game. Tiled background with enemy tiles on top.)
The current hierarchy is:
<custom-element style="position: relative; z-index: 0;">
<mat-grid-list cols="3" rowHeight="1:1" gutterSize="0px" style="position: relative; z-index:2">
<mat-grid-title *ngFor="/* stuff generating an image */">
<img src="/* source dependent on the ngFor */"/>
</mat-grid-title>
</mat-grid-list>
<mat-grid-list cols="3" rowHeight="1:1" gutterSize="0px" style="position: relative; z-index:3">
<mat-grid-title *ngFor="/* stuff generating an image */">
<img src="/* source dependent on the ngFor */"/>
</mat-grid-title>
</mat-grid-list>
</custom-element>
The custom element is inside a flex layout (row, space-around, every child has flex-grow: 1)
Though they are still below each other, not stacked. :/
How do I fix that?
(Btw I noticed a gutter size of 0px doesn't work perfectly. There's still some background color shining through between some tiles. I think it has to do with anti-aliasing but I have no idea how to disable it for the grid or something.)
Related
I'm attempting to place images inside grid tiles in an Angular-Material based app I'm working on. My problem is that these images do not "fit" within their tiles. Below is an example. My image is large (2832x4256) and takes over the entire container rather than scaling to fit within its tile. How could I get images to scale to fit within their respective tiles in the grid?
<md-grid-list md-cols-gt-md="3" md-cols-md="2" md-cols-sm="1" md-gutter="12px" md-row-height="1:1">
<md-grid-tile class="green">
<img src="resources/images/food-beer.jpg" alt="beer">
<md-grid-tile-footer>
<h3>first tile</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="blue">
<md-grid-tile-footer>
<h3>second tile</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="purple">
<md-grid-tile-footer>
<h3>third tile</h3>
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
Below is the result. What I'm aiming for instead is for the image to occupy the same amount of space as each of the blue and purple tiles.
If you want them to occupy the entire rectangle, I believe using the "layout-fill" attribute will also achieve that.
<img src="resources/images/food-beer.jpg" alt="beer" layout-fill>
It's been a year and the syntax has changed dramatically, but the problem remains. Here's how I solved this issue in an Angular 5/Angular Material 5 project.
For 2 columns and pictures that were 4600px x 3400px, I did the following:
In my css:
.tile-image {
width:100%;
height: auto;
}
In my html template:
<mat-grid-list cols="2" rowHeight="6:4">
<mat-grid-tile>
<img class="tile-image" src="../demo/tilePic1.jpg">
</mat-grid-tile>
You could either do this with targeting the image in CSS or by setting it as a background image.
Here is the CSS method but the downside to this is as the aspect ratio is based on the images width, at some breakpoints the image may not fill the tiles height.
.green img {
max-width: 100%;
height: auto;
}
So going with a background image maybe a little better but this method isn't fully cross browser supported.
.green {
background-image: url('folder/your-image.png');
background-size: cover;
}
All the answers are nice. But you can also try
<img src="resources/images/food-beer.jpg" style="object-fit: cover; height: inherit; width: inherit;">
I have a banner which is scrolling multiple images using MD-Slider module (JCarousel). The website is responsive hence there would be 3 different layouts of any image inside the banner:
Normal Resolution:
Layout for iPads and bigger tablets:
Layout for Mobile:
Currently I have used temporary images in the banner in the following fashion:
banner1.jpg
banner1-iPad.jpg
banner1-mobile.jpg
So, "banner1" is the key here. This is how my div looks for normal layout:
<div class="md-slide-item slide-1" data-timeout="8000" data-thumb="http://xxxxxxxxxx.com/TestWebsite/sites/default/files/styles/md_slider_1_thumb/public/banner1.jpg?itok=y4RT2g4r" style="height: 268px; left: 0px; top: 0px; opacity: 1; display: block;">
<div class="md-mainimg">
<img class = "mdslider-img-tag" src="http://xxxxxxxxxx.com/TestWebsite/sites/default/files/banner1.jpg" alt="" style="width: 100%; height: auto; top: -59.3653846153846px; left: 0px;">
</div>
<div class="md-objects" style="font-size: 99%;">
</div>
</div>
I can use the class mdslider-img-tag to replace the image in CSS using some of the literature mentioned below:
1.https://css-tricks.com/replace-the-image-in-an-img-with-css/
2.http://www.emailonacid.com/blog/details/C13/a_slick_new_image_swapping_technique_for_responsive_emails
However, my problem lies in getting the key "banner1" inside the css before appending -iPad or -mobile part of the text to same so that the right image for the layout is displayed.
Is there an elegant way to achieve this?
Take a look at Interchange by Zurb, this works independent of Foundation themes but works best with them.
http://foundation.zurb.com/docs/components/interchange.html
While not a CSS solution I think this would actually be your best solution rather than creating a less than ideal CSS hack, CSS just isn't able to do what you want yet.
I want to clip an img element from a CMS when it renders on the page so that, no matter the proportion of the XY dimensions of the original image, it looks the same as other buttons on the same page. The problem is when I build it with the following code, the Foundation grid breaks on smart phones and other mobile devices. Any suggestions?
.clipsquare {
overflow: hidden;
clip: rect(0px,60px,60px,0px);
position: absolute;
}
<div class="one columns">
<a class="th" href="http://my-url">
<div class="clipsquare"><img src="myImage.jpg" alt="title" width="90"></a></div>
</a>
</div>
class .one.columns on your div with the clipsquare image isn't correct foundation classes. In a standard 12 column layout you would do the following:
<div class="row">
<div class="large-12 columns">
<!-- Column content here -->
</div>
</div>
Further, there are two other questions I'd ask here:
Why aren't you using CSS to style your buttons? and/or...
Why aren't you letting your CMS resize your images for you?
clip has been deprecated. The new property that does the same thing and even more is called clip-path. It has few gotchas though,
AFAIK rect() doesn't work either. You need to use inset().
Dimensions need to be separated by space and not commas(,).
Webkit needs a prefix and positioning is not required.
Example,
.clipsquare {
overflow: hidden;
-webkit-clip-path: inset(0 60px 60px 0);
clip-path: inset(0 60px 60px 0);
}
For more information, on this topic, refer this excellent article on CSS Tricks,
http://css-tricks.com/clipping-masking-css/
In order to teach the different components of a website, I have a giant image (made in photoshop) with a bunch of boxes labeled header, sidebar, content, footer etc all in one image. Using absolutely positioned divs with images inside, I have made it so that when moused over certain parts of the image, like for example the logo, a box appears with information about that specific part of the website and this box appears on top of the logo.
The problem is that this doesn't seem to work in internet explorer (the images never appear) and the images are out of place on a Mac in Safari. The feature I am describing can be seen here
and some samples from my code are below. Is there a better way I can accomplish this task, or solve the problem of the images not appearing in internet explorer and being positioned differently on Macs in Safari?
HTML
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" width="326" height="109" alt="Logo Information"></div>
<div class="look" id="look2"><img src="images/extensive_look/header_info.jpg" width="236" height="74" alt="Header Information"></div>
<img src="images/extensive_look/website_layout.jpg" width="1200" height="890" alt="Website Layout">
CSS
.look:hover img{
visibility:visible;
}
.look {
position: absolute;
left: 320px;
top: 328px;
}
#look1 {
top:211px;
left:53px;
}
#look2 {
top: 205px;
left: 487px;
}
#look3 {
top: 282px;
left: 403px;
Something like this to complement the comment:
<div>
<h1 align="center">Extensive Look at a Website</h1><p style="width:800px;margin:0 auto;">As you can see in step 1 of the 7 steps, web design begins with an understanding of a website. Below is a model website featuring the different components of a website. As you scroll, make sure to mouse over the different components to get information on that component. It is important to note that while these are common parts of most websites, not every website will have every component.</p>
<p style="width:800px;margin:0 auto;"> </p>
</div>
<div class="content" style="position:relative;width:1200px;height:890px;background-image:url('images/extensive_look/website_layout.jpg');">
<div class="look" id="look1"><img src="images/extensive_look/logo_info.jpg" alt="Logo Information" height="109" width="326"></div>
rest of look things here.
</div>
I have an animated canvas and i am trying to overlay a responsive web template on top of it, however the web template just sits at the bottom of the canvas and not on top of it. I have tried to change the absolute layout but that then removes the responsive aspect of the website.
I have also tried to add a zindex but again that didn't make any difference, any advice or nudge in the right direction would be appreciated.
A link to the template is below
http://www.redstardigitalmedia.co.uk/blue/index.html
Thanks
I modified your page using chrome developper tool, I've added to your canvas element:
<canvas id="world" width="1600" height="779" style="
z-index: -1;
position: absolute;">
and to your page :
<div class="gridContainer clearfix" style="
position: absolute;
z-index: 1;">
And it works fine (although the canvas animation fluency could be improved, do you use requestAnimationframe ?)