I have a play to build out multiple HTML5 ads at the same time. Currectly using adobe Animate CC.. hate it.
Plan is to hard code it onto a html5 page and use CSS. I will have a page full of divs all at the correct ad size. Then say I use a background image in the css for all backgrounds centered and set to cover.
Is there anyway to have it crop and download the correct image sizes based on the div size??? I want it to download at 100% view and crop based on the div width and height. This way I use a single image, position it with css for all the banner sizes and run some code to give me all of the sizes correctly based on the div.
HELP!
Related
I have WPBakery installed on my wordpress website, and I have tried to have two images in a single widget in a row divided into 5 columns, the two images being in a single column.
One of the images however is a sort of a custom stylized picture frame for the other image. I managed to partially solve the issue by applying a margin of "-140%" on the top margin. Unfortunately I can't get the image to stretch out to fit the frame, also when changing the viewport to be smaller (mobile sized for example), the frame scales proportionally as it should, while the image it self shrinks.
Can anyone help me out on making the image scale proportionally with the image, and also making sure it stretches to the size of the frame?
Note: The images might not be the same resolution as the frame, but i need the image to be stretched to those dimensions.
Here is how it looks on a 1080p monitor, notice how its not stretched to the frame
When it is shrunk to a mobile viewport
In my professional opinion of over 13 years of web development in a business setting, my answer to you is use ONE image. Have a .PSD project for these. Have your image frame as one layer, and use your normal images in another layer on top. When you want to create one of these images, open up the .PSD project, highlight the image to be replaced, and import the new. You may have to crop the new to be the dimensions of the last one and play with the centering x and y. Then, save your new image at full size. It will scale down because it is ONE image, not one image with a hacktastic image background.
I am using amp (Accelerated Mobile Pages Project) technology in a new project.
My concern is about amp-img tag for images. According to this documentation (https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md) you can use the attribut layout='responsive' for responsive purpose and in conjonction you can use srcset,media,sizes attributs also for responsive purpose.
Likewise, the documentation says that the image will take the space of its parent container.
I don't understand this logic. Why should we size the container to have the proper size of the image. If it works this way, it is very heavy to use.
Thank you in advance for your answers
The tricky part is having responsive elements render on the page without adversely affecting performance metrics or user experience.
Yes, you can easily get images to fit the screen without width and height but there are performance hits. I think that is why AMP does not allow responsive layout without width and height.
The browser must download the image first to get the dimensions of the image, then resize the image appropriately for the screen size, and finally reflow and repaint the page.
In AMP, the rendering path is optimized so that first the page is laid out, setting aside placeholders for the images based on the dimensions provided in amp-img (using those numbers to establish aspect ratio), then the resources are downloaded, and the page is painted. No reflow is required.
For more information about Restricting width of responsive images Click Here
On a webpage I am rendering a collection of images. Some images are portrait orientation, some are landscape, all are larger than the desired render size.
I want to display these images in a gallery of neat, uniformly sized, square thumbnails.
How can I do thus using only CSS?
I would like to avoid a javascript library if possible. I don't need to select a part of the image to display, just any central-ish square area.
I've seen this question asked elsewhere, but have not yet found an answer that seems to work with all orientations (e.g., portraits may get correctly cropped/resized, landscapes do not).
You could still use server side technology to resize the image via cURL; however, that is neither here nor there. One thing to understand, CSS is not really a programming language, as in, it cannot make decisions or do any real math, so we can't make dynamic decisions with just CSS.
That being said, you could create divs for your gallery, and use CSS to set the background image to the desired image. In CSS3 there is a property called background-size. You can set the size in pixels manually, but it will not maintain aspect ratio that way, so it will probably look awful. Setting the background-size: cover will scale the image so that it completely fills the background area while cutting off the excess. Setting background-size: contain will scale the image so that it maintains its original aspect ratio and fills the background without cutting off the image. Here is a little code that kind of explains how to use it. jsFiddle
EDIT: I forgot to mention that this solution will only work in IE9+ (should work fine in FF, Chrome and Safari)
I suggest having a div wrap the images. You can specify a width and height on this wrapper with a overflow:hidden.
Hi more of a question of opinion or best practice here. I am building a site that has a page with a carousel at the top under which there is an accordion. The accordion includes all of the same images as the carousel but at half the size.
For performance would it be best to use the same images as the carousel as then there will only be one http call for that asset or generate the correct size image variations for all the relevant slots but increase the amount of requests for the same asset?
Use the same images at both places and re-size them using height and width attributes of img tag
I have a background image that I want to use on a webpage. I will probably use CSS. The background image will contain a person in the background that will be to the left of other content (like a voting box, fans listing, etc). How do I go about it so the bg picture shows perfectly regardless of the resolution of the computer, the size of the window, and browser used, etc.
There's an updated version of bgStretcher, bgStretcher II.
All you need is a bit of jQuery, here is the plugin to stretch the background proportionally..