currently I'm working on an image galery and image upload tool. In the image below there is a demonstration of my current and my wanted galery state. The user is able to click on the thumbnails and see the large picture below that current thumbnail row in full size, pushing the next rows relative to the components height.
images.component.html
<div class="container">
<div class="image-box" *ngFor="let img of images$ | async">
<img class="mat-elevation-z1" [src]="environment.img + '/images/thmb/' + img.id + '.jpg'" (click)="selected = img">
<app-image-details *ngIf="selected?.id === img.id" [img]="img"></app-image-details>
</div>
</div>
images.component.scss
The theme-flexfix.scss fixes all images widths equally, while using flex. flex-container-wrap-items() makes the container flex and flex-wrap. The .image-box items are flex: 1.
#import 'src/theme-flexfix.scss';
.container {
#include flex-container-wrap-items(128px);
}
.container > .image-box {
#include flex-wrap-fix(128px);
padding: 4px;
box-sizing: border-box;
/* position: relative; */
}
img {
width: 100%;
}
image-details.component.html
<img [src]="environment.img + '/images/' + img.id + '.jpg'">
<p>
Lorem ipsum
</p>
image-details.component.scss
:host {
/* position: absolute */
/* left: 0 */
}
Tried the commented styles in resulting in what I want, but not pushing the other content. I think there is an easy solution, but for now I can't get it.
Thanks for your help.
I assume you are trying to replicate Google image search.
I would go about it like this:
When image is clicked, calculate how many images in a row you are displaying.
Inject DIV with larger version of the image after the last image in the row.
The idea is to always inject DIV after the end of current row.
This way, your DIV will not be absolutely positioned, but instead will flow with HTML and no absolute positioning hacking is required.
Related
For a webpage grid-layout I decided to use Flexbox. Now I wanted to implement some "auto-functionality", so that grid-boxes can later be inserted without the need to add classes or styles in the HTML. One of this features is to make a box allways be 75% as tall as it is wide - even if the box is resized by, for example, browserwindow resize. Off course, if the boxes content extends the 75%-height, it should (and only then should) increase its height to fit the content. I searched for hours to find a suitable solution, but I finally got it working. So I thought at least, until I added content to the box.
The auto aspect-ratio works fine, as long as the box is empty. If I add content, the 75% of the width is allways added to the height it has through extension by its content. I made a jsfiddle to clearly visualize the problem:
JSFiddle wd5s9vq0, visualizing the following Code:
HTML-Code:
<div class="container">
<div class="content-cell"></div>
<div class="content-cell"></div>
</div>
<div class="container">
<div class="content-cell">
This cell has an inreased height because of
it's content. The empty space below the
content is the 75% of the cells width.
</div>
<div class="content-cell"></div>
</div>
CSS:
.container {
display: flex;
width: 400px;
}
.content-cell {
flex: 1 1 0;
margin: 10px;
background-color: #ccc;
}
.content-cell::after {
content: "";
display: block;
padding-top: 75%;
}
If I didn't knew it better, it looks like a floating-problem - but I think the ::before / ::after selector should add the block-element before the element it is used on and not inside it.
Does anyone has an idea on how to fix this problem?
This seems to be a very widespread problem on the internet, and most solutions you find are either about wrapping the content, absolute-positioning the content or a mixture of both. This has numerous and case-dependent downsides. After hours of playing around with the code, I finally found a combination of CSS proporties that work without the need to add any DOM or make the content absolute-positioned. This looks quit basic, and I am wondering why it took me so long and why you can't find it out there on the web.
The HTML:
<div class="mybox aspect-full">
This is text, that would normally extend the box downwards.
It is long, but not so long that it extends the intended aspect-ratio.
</div>
The CSS:
.mybox {
width: 200px;
}
.aspect-full::before {
content: '';
display: block;
padding-top: 100%;
float: left;
}
The only downside I could find is that the content of your cell must float. If you use clear on one of your child objects, it is positioned below the expander-block and you are back to the original problem. If you need to clear the floating of divs inside of these aspect-ratio-cells, you might consider to wrap them and keep the wrapper floatable.
I have an image slideshow that uses JavaScript to apply a class called .hide to all images but the first on page load. This hides all of the images but the first.
I noticed in Internet Explorer 8 (which I have to support) that when the slideshow is loaded, the first image displays correctly (because it's not hidden) but when I click "Next" and the hidden image is revealed, that image has zero dimensions.
After researching online, I saw that for IE 8, elements with display: none will not have any dimensions.
My JavaScript waits for the window and images to load before running, which I thought would allow the images to have a dimension in IE 8 before they were hidden:
window.onload = function() {
// Hide all but first photo
hidePhotos();
addControls();
progressSlides();
};
I read that visibility: hidden or opacity: 0 could be used instead. However, this leaves a lot of white space below the slideshow where the images are hidden.
HTML:
<div class="slideshow">
<figure class="image">
<img src="https://c1.staticflickr.com/9/8584/16136057529_e7b64928d0_z.jpg" />
<figcaption>This is an example of a really long caption. Here I go. Do I wrap to a second line? Wrap wrap wrap wrap. Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap</figcaption>
</figure>
<figure class="image">
<img src="https://c4.staticflickr.com/8/7495/16322256485_08ee0ee36f_z.jpg" />
<figcaption>Insert caption</figcaption>
</figure>
<figure class="image">
<img src="https://c2.staticflickr.com/8/7474/16120961661_8dc12962dd_z.jpg" />
<figcaption>Insert caption</figcaption>
</figure>
CSS:
.slideshow {
position:relative;
/* To position slideshow buttons */
max-width:920px
}
.hide {
display: none;
}
.slideshow img {
width:100%;
border-top-left-radius:10px;
border-top-right-radius:10px;
margin-top: 1em;
}
JS Fiddle: http://jsfiddle.net/amykirst/tnLLhu4j/
I tried to use absolute positioning to position the images at the top of the containing .slideshow div, but this caused two problems:
It gave .slideshow a height and width of 0 because its children were all absolutely positioned. The lack of dimensions allowed the slides to go beyond the layout, instead of being contained by .slideshow.
Any text on the page was obscured, so if there was text above or below the slideshow, the slideshow would appear on top of it.
Also, with absolute positioning, I couldn't set the slideshow container (.slideshow) to have a max-width of 100% to contain the images and make them responsive, because the slides were removed from the flow.
How can I hide the images on page load and have them retain their dimensions in IE 8 without leaving a bunch of white space below the slideshow, as opacity: 0 or visibility: hidden would do?
I found a solution that worked.
.hide {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
}
I needed the hidden image to span the entire width of the slideshow (otherwise, when the hidden class was removed, IE 8 gave the image zero dimensions), so I used left and right positioning of 0.
Because absolute positioning was only used for elements that were hidden, it didn't cause problems with the layout that I mentioned earlier because only the hidden elements were affected.
I'm trying to get the CSS for a Pin Style right. I'm trying to get the exact Pinterest Pin Style, that means that the image is filling the container/box and below there are the stats...
The Image below shows a Pinterest Pin that i'm trying to make. Does anyone know the Css that is required for the image to Fill the container/box ?
Thank you
You just need to make sure your image is the same width as its container element. Set the width on your container to the same width as your image and make sure there is no padding in your container or margins on the top or sides of your image.
<div class="container">
<img width="200">
<div class="meta">
text
</div>
</div>
.container { width: 200px; padding: 0; }
.container img { margin: 0; }
Pinterest's code gets a bit more complex but you can always use an inspector to see what they're doing specifically.
I have been fiddling around with this for some time now, but I still don't understand how it should be done.
I would like the image to be maximized (100%/100%) in the background of the itemtemplate div, but right now it just makes it fit inside the div which is 250px/250px.
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
<img style="-ms-grid-row-span: 2;" src="#" data-win-bind="src: backgroundImage; alt: title" />
<div class="item-overlay">
<h4 class="item-title" data-win-bind="textContent: title"></h4>
<h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle">
</h6>
</div>
</div>
Any ideas ? thx.
You can position the image absolutely and set the height and width to 100% in your CSS files.
.itemtemplate > img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
Just make sure you remember to position the parent div and the other children of .itemtemplate relatively:
.itemtemplate, .itemtemplate > div {
position: relative;
}
The parent needs to be positioned relatively to ensure the img is positioned within that element. The other children of the parent need to positioned relatively to ensure that they are drawn above img (as positioned elements are drawn after static elements). If you have trouble seeing the other child elements then you can set their z-index.
Working example: http://jsfiddle.net/sjsNJ/
Need to use CSS background-image.
div.itemtemplate
{
background:url(PATH_TO_IMAGE);
background-size:100% 100%;
background-repeat:no-repeat;
}
See site below for more info.
http://www.w3schools.com/cssref/pr_background-image.asp
I am not familiar with the attributes you are using. But, in order to use an image for the background. There are couple of ways.
If it is <body> or <table> you can also define them by using doing something like this
<body background="link/to/image.jpg">
But the global way, which every element supports would be to define them using CSS
<div style="background-image: url("link/to/image")">...</div>
Now, coming to the image part
Whenever you are using a background image,
It is never going to re-size to fit the container. Unless you use CSS3.
/* CSS3 Snippet to resize a background */
div
{
background-image:url("link/to/image");
-moz-background-size:80px 60px;
background-size:80px 60px;
background-repeat:no-repeat;
}
If the container is big, it will start repeating itself to fill the area. Which can be controlled to repeat or not repeat. Like
div {
background-image: url("link/to/image");
background-repeat: no-repeat; /* similary repeat-x and repeat-y */
}
However, what you are trying to use in using a <img /> to act as a background, which is semantically wrong and I do not recommend it.
I am trying to build a simple slideshow. So far, the basic markup looks like this:
<h1>My Slideshow</h1>
<p>This paragraph behaves as expected.</p>
<div class="slide-container">
<div class="slide">
<h2>First Slide</h2>
<p>Some stuff on this slide…</p>
</div>
<div class="slide">
<h2>Second Slide</h2>
<p>And some more stuff here…</p>
</div>
</div>
<p>This paragraph will disappear beneath the stacked images.</p>
This is the corresponding CSS:
.slide-container {
position: relative;
}
.slide {
position: absolute;
top: 0;
/* just for the looks */
width: 20em;
padding: 0 1em;
border: 1px solid steelblue;
background: white;
}
The problem is, that the .slide-container does not fit to the height of its child (or children) .slide (see screenshot).
I know i can set the height of the .slide-container manually, but i want to put this in a fluid grid, where the height is variable. Is there any way to achieve this?
Absolutely-positioned items are logically-associated with their parent, but not "physically". They're not part of the layout, so the parent item can't really see how big they are. You need to code the size yourself, or sniff it with JavaScript and set it at run-time.
You can use this using jquery:
function sliderheight(){
divHeight = $('.slide').height();
$('.slide-container').css({'height' : divHeight});
}
sliderheight();
This will resize the 'slide-container' div to have the same height as the 'slide' div.
You can make it responsive by calling the function on the firing of a 'resize' event:
$(window).resize(sliderheight);
Hope this helps.
Perfect way of doing this is to set the relative parent's dimensions i.e. height & width to fit the absolute children.
http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/
This guy wrote enough to understand the basics of css positioning. Actually the relative parent is used to position all its absolute child logically. But it does not share the physical position as a result it does not stretch itself to cover the relative children.