I have a Tumblr page where all the images have the same width
img.photo_img {max-width: 500px}
is there a way to style differently the portrait and the landscape ones
maybe working on their aspect ratio?
I would love to have:
PORTRAIT: width 500px
LANDSCAPE: width 750px
Thanks.
you can do this with media queries
#media all and (orientation:portrait) {
img.photo_img{max-width:500px;}
}
#media all and (orientation:landscape) {
img.photo_img{max-width:750px;}
}
view an example here
Related
Among the functions of fabric js, there is a method or property that crops objects except canvas, but I did not find a function to crop the canvas itself. I tried changing the canvas to an image in the following way, cropping it, and then inserting it back into the canvas.
fabric.Image.fromURL(canvas.toDataURL(), img => {
currentImage = img; //save current canvas as image
currentImage.set({
scaleX : canvas.width / currentImage.width,
scaleY : canvas.height / currentImage.height,
cropX: selectionRect.left,
cropY: selectionRect.top,
width: selectionRect.getScaledWidth(),
height: selectionRect.getScaledHeight(),
});
canvas.setDimensions({
width: selectionRect.getScaledWidth(),
height: selectionRect.getScaledHeight()
});
canvas.setBackgroundImage(currentImage).renderAll();
but in this case, an image with a transparent background becomes a background.
If you look at the following picture, a picture of a flower without a background is on the canvas, and What I want is to resize the canvas by the dotted rectangle area without making any objects on the canvas an image as follows.
before crop:
after crop:
Just as the starting range and area are determined with attributes such as cropX or cropY when cropping an object, I would like to know how to apply this to the canvas as well.
I'm trying to create a List or Form in SwiftUI to display a few fields. One of them is an image. I'd like it to show without any borders in the cell but the content of the row seems to contain some sort of inherent margin inside the cell that I can't get rid of.
This is my code at the moment...
List {
Section("Photo") {
Button {
// do a thing
} label: {
Image(uiImage: image)
.resizable()
.aspectRatio(1, contentMode: .fit)
}
}
.listRowBackground(Color.gray)
TextField("Name", text: viewStore.binding(\.$name))
DatePicker("DOB", selection: viewStore.binding(\.$dob), displayedComponents: [.date])
}
And this is what it looks like...
Really there are two problems here.
How do I get rid of the grey border so that the image fills to the extent of the cell?
How do I resize the image with what in UIKit would be scaleAspectFill? It is currently squeezing the image to fit.
OK... I had some ideas while typing out the question.
I've solved this (at least partly) by providing the listRowInsets on the Section.
Section {
// the content
}
.listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))
This then displays like...
Now to work on fixing the aspect ratio. 🤣
I fixed the aspect ratio using this answer...
How to center crop an image in SwiftUI
I want to make a scrolling app with a gradient background. As user scrolls - background color changes.
For example, the bottom is black and the top is white I would specify the height of a VStack for 8000, and for this height, as the user scrolls the screen he will see the color change.
I didn't find any solution. Tried making LinearGradient for VStack and Rectangle figures for its full height, but it only covers the phone screen size (can't fill all 8000 height points). So if I scroll upwards, the gradient is lost and it only displays the black screen.
Thank you]1
You can achieve this using a rectangle within a ZStack:
struct ContentView: View {
var body: some View {
ScrollView {
ZStack(alignment: .top) {
// Example width and height. Width should be the width of the device
Rectangle().frame(width: 10000, height: 2000).foregroundColor(.clear).background(LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .top, endPoint: .bottom))
// Add your actual content here:
Text("Yeet")
}
}
}
}
I need my page to adapt from portrait to landscape for Iphone X without having to reload the page.
Here are the media Queries I use:
// Screen size variables
$screen-sm-min: 576px; // Small tablets and large smartphones (landscape view)
$screen-lg-min: 992px; // Tablets and small desktops
//$screen-lg-min: 1024px;
$screen-xl-min: 1200px; // Large tablets and desktops
// Mixins
#mixin xs { #media (max-width: #{$screen-sm-min}),
(min-device-width : 375px) and (max-device-width : 667px),
(min-device-width : 414px) and (max-device-width : 736px),
(min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3)
{#content;} } // Tiny devices
#mixin md { #media (max-width: #{$screen-lg-min}), (min-device-width : 768px) and (max-device-width : 1024px),
(min-device-height : 1024px) and (max-device-width : 1366px)
{#content;} } // Medium devices
And here is a link to the page:
http://dev2.lemeilleurducbd.com/location_etu/home.html
I have looked on Google but I could not find an answer to this issue.
Thanks for your help
CSS solution
You can use orientation in media queries.
landscape rules apply when the browser window width is greater than height:
#media (orientation: landscape) {
...
}
portrait rules apply when browser window height is greater than width:
#media (orientation: portrait) {
...
}
JS solution (Source)
Note: Unfortunately this feature is not supported in safari.
You can listen to the orientationChange event for when the orientation changes, and read screen.orientation when you need to know the current orientation.
screen.addEventListener("orientationchange", function () {
console.log("screen orientation: " + screen.orientation);
});
Another option would be to listen to window resizes and compare the ratio of width and height.
if (width/height > 1) { //landscape } else { portrait }.
I recommend throttling the window resize listener.
I put a piece of javascript on the body tag, that was adapting the body width according to the windowWith, this is what was preventing to go on landscape mode without reloading the page..
I am working on a WordPress theme and am trying to incorporate retina enabled CSS queries into my CSS file.
I would just like to clarify that I have the media queries set up correctly before I change out all my background images.
I have doubled the size of all my background images and perfixed
them with the "#2x" naming convention. e.g icon-user#2x.png.
I have added a jQuery function into my code to swap out the images with the CSS class of hires.
In my CSS document I have a normal CSS class for a background image.
Normal CSS query
.side-nav .arrow {
background: url(../images/arrow-nav.png) no-repeat top left;
width: 5px;
height: 8px;
display: inline-block;
margin-left: 10px
}
Is this the correct way i would change the .side-nav .arrow class for a retina enabled device? When declaring the background size do I keep the size that of the original smaller image?
/* All Retina Ready devices larger than 1.5 pixel ratio */
#media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
.side-nav .arrow {
background-image:url(../images/arrow-nav#2x.png);
-webkit-background-size:5px 8px;
-moz-background-size:5px 8px;
-o-background-size:5px 8px;
background-size:5px 8px
}
}
jQuery Code
$(function () {
if (window.devicePixelRatio == 2) {
var images = $("img.hires");
/* loop through the images and make them hi-res */
for(var i = 0; i < images.length; i++) {
/* create new image name */
var imageType = images[i].src.substr(-4);
var imageName = images[i].src.substr(0, images[i].src.length - 4);
imageName += "#2x" + imageType;
/* rename image */
images[i].src = imageName;
}
}
});
Thank you
As long as there is some form of scaling taking place, like when you declare
<meta name="viewport" content="width=..."> (for android/ios/blackberry/WP8)
or
#ms-viewport {width: ... ;} (for non-WP8 IE10)
or ... even if you declare nothing most mobile devices will by default automatically scale such that viewport width=980px
then all CSS dimensions you declare with 'px' will exist in the same proportion to their viewport regardless of differences between their physical DPI/PPI
this means you shouldn't have to change a single thing about your style class except the background image's URL when the media query matches a high res device:
#media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
.side-nav .arrow {
background-image:url(../images/arrow-nav#2x.png);
}
}