I followed the instructions here to show already existing files on the dropzone area.
The problem is that the files appear cropped. See this image:
How should I go about fixing this? Has someone else seen this as well?
I fixed it by adding this css selector:
.dropzone{
.dz-preview{
.dz-image{
img{
height: 120px;
width:120px;
object-fit: cover;
}
}
}
}
The thumbnail you provide must be square.
Unlike what seems to be the behaviour of the newly dragged images, for added files, Dropzone will scale the picture and attempt to fit it in the image. That means if your image is wider than it is tall, you may see white space like the image shown in the question.
Related
i have a question about image re-sizing.
is there any way to resize photos with css or php without cropping them?(woocommerce cropping feature is not the way) Also I have tons of photos already published in my website and to resize them one by one would be pain in the...
What should i do to fix this problem ?
example of what i got
https://i.imgur.com/8tKmbrA.png
tried
img {
width: 30%;
height: auto;
}
I created a shape (a rectangle to be exact) and in this shape I wish to have an image overlapping its actual size (e.g the rectangle would be 400px by 400px and the image would be 600px by 600px).
Are there any ways of doing this? Here's a mockup of what I'm describing:
EDIT: To achieve this, simply use
z-index: 1;
position: absolute;
Thanks user acarlon.
I am not 100% sure what you are after, but it sounds like you want an image cropped to a container div.
What you want is overflow: hidden on the container div. See here for details.
You can also use clip. See here.
Update
Actually, it seems like you want one image to overlap another. In which case you want to use absolute positioning and z-index. See here.
I am not very experienced with image sprites so here is the question..
I made an image sprite on the web; this is the code:
.sprite-slidebutton {
background-position: 0 0;
width: 70px;
height: 63px;
}
.sprite-slidecross {
background-position: 0 -113px;
width: 70px;
height: 63px;
}
The image I got, I downloaded to my page and I called the .png wherever wanted it. It does appear! And the sprite is working, the image is switching like i want it to..
But the PNG is not showing a transparent background :S also the image is not in the middle, I only see half of the both images.. where and how to adjust?
To see it live:
solved
If i had to guess i would say there is a problem with the alpha values in the image. Download gimp and see what they are.
the png probably has a white background, instead of a transparent background. that's something you will need to edit in photoshop, gimp or similar.
as far as only seeing half the image it might be due to the element you are assigning the class to. if its an inline element like <a> or <span>. try adding "display:block;" inside the sprite-slidebutton class.
I did give a search before I started to ask this question as it is a very simple question. I have an image and I would like to have it as the only element on our webpage. There is no other content as this image conveys what we want to convey. Now we would also like to resize itself depending upon the device it is being displayed. I hope this is achievable through HTML though I would like to know if there is any other options.
Thank you,
Karsnen
What you're looking for is the background-size property. By applying background-size:cover to your <body>, the image will resize itself accordingly regardless of viewport dimensions.
Note: Your image may clip with the use of cover.
An alternative value for background-size can also be contain. If you apply background-size:contain instead, it'll still resize the image accordingly just as the former would.
Note: While this approach promises to never clip the image, it'll also show negative/dead space as well (which sometimes isn't ideal).
Your CSS should reflect the following:
body {
background-image: url('bg.jpg');
background-position: center center;
background-size: cover; /* or background-size: contain */
}
You can use an image as a web resource (“page”). You could simply link to it using something like href="test.jpg", or you could announce its URL directly. Browsers will display it somehow, possibly scaling it to fit browser window width.
The next simpler, and better, approach is to use a page with just an img element as its content. It can be made to scale to browser window width by setting its width to 100% (in HTML or in CSS). This way, it will keep its width:height proportion when scaled. The quality of scaling in browsers varies but is generally good, unless you scale upwards a lot. In this approach, the inherent width of the image should be sufficiently large (say 2,000 pixels) to avoid considerable upwards scaling.
To remove default spacing around the image (default page margins), it’s simplest to use CSS.
Example (with “...” to be replaced by useful information):
<!doctype html>
<meta charset=utf-8>
<title>...</title>
<style>
html, body { margin: 0; padding: 0; }
</style>
<img src="demo.jpg" alt="..." width="100%">
Set it as a background-image and use the appropriate background-size (e.g. contain):
html {
height: 100%;
}
body {
background: url('to/your/image.png') no-repeat;
background-size: contain;
}
Here's a demo.
I use this:
css
#body{
background:url(../img/bg.jpg);
margin: 0;
}
javascript
$("#body").css('width',window.innerWidth)
$("#body").css('height',window.innerHeight)
I am making a website in Joomla.
And on my front page I have some images, which are links.
I want these images a's to get a slightly green effect, like opacity + green and stil have the original images below.
Is this possible to do with only css?
I can get the opacity to work, but not the green color.
Hope some one can help me.
Here is my site. it is the the small images under "Referencer" and "Nyheder"
This is doable with CSS. The main trick is that the links currently aren't surrounding the img block because their display type is inline.
Assuming the following HTML:
<img src="..." />
This is the CSS you need:
a.greenish {
background: green;
display: inline-block;
}
a.greenish img {
opacity: 0.5;
}
Adjust green and opacity to taste, obviously.
See this lovely jsfiddle for an example. Note that this includes addition CSS in case you only want it to turn green when hovered.
You won't be able to do what you want with pure CSS easily. There is no "overlay" in CSS. You can manipulate the background color/opacity, but the image would always be on top of that so it would not achieve the effect you want.
What you will need to do is to make the image the background of the A, then change the background do a similar image with the effect already applied. The images are small so you could easily make them sprites with the over look all in the same image. I did exactly this on the social icons at the top of my company website - http://www.bnrbranding.com/