I am trying to crop the image using display and justify-content in CSS as per the screen size. The image look like below, between the vector header and start of the image some padding is there. This image looks fine when it is displaying in the desktop based screen, but in mobile based screen it is not displaying fine. I am using the below CSS to crop the image in my web page.
Image Looks
CSS Code
.container {
width: 100%;
height: 68px;
overflow: hidden;
display: flex;
justify-content: left;
position: sticky;
position: -webkit-sticky;
}
HTML code
<div class="container">
<img src="/header.png">
</div>
After cropping the image using CSS, the image look like below
But I also want to crop in the beginning of Vector Header based on the screen size like below. Is there is any way in CSS to do this with the existing CSS code.
Thanks in advance for your suggestion and advice.
Try background-position property
#header {
background-image: url('https://i.stack.imgur.com/9RIPB.png');
background-position: -30px 0px;
width: 200px;
height: 100px;
}
<img id="header" />
In my Project, I set my background to an image I chose.
The code for that is here:
<body>
<img class="backgroundimg" src="{% static 'spotifywallpaper.jpg' %}" style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
</body>
I then use a media query in css. I am new to these queries and development in general, so please tell me if I am doing anything wrong or in an inefficient away.
My query basically says If the width of the page is 700px or less, set the image width to 100%. When testing this, my image doesn't refit to the page, instead stretches inwards causing a horrible effect to the image.
Here's my media query code:
#media screen and (max-width: 700px) {
.backgroundimg {
width: 100%;
}
}
Does anybody know why this isn't working? Thank you.
UPDATED:
CSS
.mydiv {
background-image: url('https://wallpaperaccess.com/full/667865.jpg');
width: 100%;
height: 100%;
object-fit:cover;
}
HTML
<div class="mydiv">
Placeholder
</div>
This code does not work correctly. I background to function exactly the same as it did with the image tag, this time with a div.
UPDATE 2:
This code does not set the width and height of the image to 100% of the page as expected.
HTML
<img class="bgimage"src="{% static 'spotifywallpaper.jpg' %}" alt="">
CSS
.bgimage {
width: 100%;
height: 100%;
object-fit:cover;
}
if you want the image to not be ugly while streching it on 100% of width
you can use object-fit property
e.g:
img{
width: //blabla
height: //blabla
object-fit:cover;
}
Also if you are using media query to change width on screen change you should not have width and height defined in inline style and I believe you know what inline styling is :d <3
Update:
Note that object-fit property is for img tag, but if you are going to use set background by using <img> tag it is bad practice you should use <div> instead with background-image:url('/images/someimage.png') property because div has much more efficent ways of manipulating background images.
Check this on the left on mentioned link, there are list of background properties
.mydiv {
background-image: url('https://wallpaperaccess.com/full/667865.jpg');
width: 100%;
height: 100%;
background-size:cover;
}
<div class="mydiv">
Placeholder
</div>
for more to know about background-size property checkout this link
First, you gave it inline code, inline code is stronger than external code so your media query code won't work for example
<div id="test" style="width: 100%; height: 100px; background-color: red;"></div>
And in css file you gave
#media screen and (max-width:700px){
#test {
background-color: black;
}
}
The result will be red background for all screen sizes because the inline code is stronger than the external code.
Try to transfer the inline code to the CSS file like this
#test {
width: 100%;
height: 100px;
background-color: red;
}
#media screen and (max-width:700px){
#test {
background-color: black;
}
}
Is there a way to have an image set to a specific size while using a desktop browser, but have it automatically resize to your screen using a mobile device?
I currently just have the image hardcoded to a specific size in HTML.
<img src="URL" alt="Cool Link" style="width:720px;height:100px;border:0;">
I'm open to trying HTML/CSS/JS etc. Thanks!
You sholud add class attribute to img tag and then add below css for image
<img src="link" alt="Cool Link" class="anyofimgclass">
.anyofimgclass{
display: block;
max-width: 100%;
height: auto;
}
As Arti Rana said, you should create a class first.
Then you can use #media attribute, to set style for specific max-width. You can check this out here:
CSS #media Rule
P.S. I recommend you to use containers (div) in order to create classes.
.box {
display:inline-block;
width:100%;
text-align:center;
}
img {
display:inline-block;
width:768px;
margin:0 auto;
}
#media only screen and (max-width: 767px) {
img {
width:100%;
}
}
<div class="box">
<img src="https://www.myhappyenglish.com/x9walos9f/uploads/2013/05/placeholder.png">
</div>
https://jsfiddle.net/Sampath_Madhuranga/6t2snwa3/6/
This works fine..Try this
This seems to be a pretty standard situation but the HTML/CSS is behaving oddly. I'm in the process of building a profile page for a game and am also looking at mobile responsiveness. I can't seem to get the right-margin to go away. It's not a problem in portrait mode (using a Chrome mobile emulator extension) but in landscape, the div + margin is too wide and a scrollbar appears.
HTML:
<div class="userProfile" style="display:none">
<div class="profileTop">
<div class="profilePicture">
<img src="somepicture.png"></img>
</div>
<div class="profileName"></div>
</div>
</div>
CSS:
.profileTop {
position: relative;
top: 10%;
left: 15%;
width: 70%;
height: 12%;
margin: 0;
}
.profilePicture {
display: inline-block;
width: 12vw;
}
.profilePicture img {
width: 100%;
height: auto;
vertical-align: top;
}
.profileName {
display: inline-block;
position: relative;
font-family:Stencil;
font-size: 1.3em ;
font-weight: lighter;
color: white;
left: 20%;
top: 35%;
}
What's odd is that if I decrease the width of the "profileTop" class, the right margin grows so that the whole thing is the same width. Any help?
EDIT: I can get a workable solution by reducing the width of "userProfile" but it's still bothering me that this won't work as originally intended.
EDITx2: The margin also exists on the "userProfile" div. I suppose the "profileTop" div is following its parent somehow but even if I add margin-right: 0 attributes to both divs, the margin is still there. The parent of "userProfile" is the body.
Error in HTML code, you don't need a closing tag for image.
Secondly, you can use media queries to achieve that. Media queries even have an option for landscape and it's really easy to use. Good luck
#media (min-width: 700px) and (orientation: landscape) { ... }
P.S. Use codepen or jsFiddle second time, it will be WAY MORE simpler to help you.
EDIT: Added media queries example
You need to use a more specific selector to override the initially-assigned CSS attribute.
#media (max-width: 768px) {
div.userProfile div.profileTop {
margin-right:0;
}
}
This question already has answers here:
How do I auto-resize an image to fit a 'div' container?
(33 answers)
Closed 4 years ago.
Is there a way to resize (scale down) images proportionally using ONLY CSS?
I'm doing the JavaScript way, but just trying to see if this is possible with CSS.
To resize the image proportionally using CSS:
img.resize {
width:540px; /* you can use % */
height: auto;
}
Control size and maintain proportion :
#your-img {
height: auto;
width: auto;
max-width: 300px;
max-height: 300px;
}
If it's a background image, use background-size:contain.
Example css:
#your-div {
background: url('image.jpg') no-repeat;
background-size:contain;
}
Try
transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
You can use object-fit property:
.my-image {
width: 100px;
height: 100px;
object-fit: contain;
}
This will fit image, without changing the proportionally.
Notice that width:50% will resize it to 50% of the available space for the image, while max-width:50% will resize the image to 50% of its natural size. This is very important to take into account when using this rules for mobile web design, so for mobile web design max-width should always be used.
UPDATE: This was probably an old Firefox bug, that seems to have been fixed by now.
To scale an image by keeping its aspect ratio
Try this,
img {
max-width:100%;
height:auto;
}
Revisited in 2015:
<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">
I've revisited it as all common browsers now have working auto suggested by Cherif above, so that works even better as you don't need to know if image is wider than taller.
older version:
If you are limited by box of 120x100 for example you can do
<img src="http://image.url" height="100" style="max-width: 120px">
<img style="width: 50%;" src="..." />
worked just fine for me ... Or am I missing something?
Edit: But see Shawn's caveat about accidentally upsizing.
The css properties max-width and max-height work great, but aren't supported by IE6 and I believe IE7. You would want to use this over height / width so you don't accidentally scale an image up. You would just want to limit the maximum height/width proportionately.
img{
max-width:100%;
object-fit: scale-down;
}
works for me. It scales down larger images to fit in the box, but leaves smaller images their original size.
I believe this is the easiest way to do it, also possible using through the inline style attribute within the <img> tag.
.scaled
{
transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}
<img src="flower.png" class="scaled">
or
<img src="flower.png" style="transform: scale(0.7);">
Use this easy scaling technique
img {
max-width: 100%;
height: auto;
}
#media {
img {
width: auto; /* for ie 8 */
}
}
img {
max-width:100%;
}
div {
width:100px;
}
with this snippet you can do it in a more efficient way
We can resize image using CSS in the browser using media queries and the principle of responsive design.
#media screen and (orientation: portrait) {
img.ri {
max-width: 80%;
}
}
#media screen and (orientation: landscape) {
img.ri { max-height: 80%; }
}
You always need something like this
html
{
width: 100%;
height: 100%;
}
at the top of your css file
Try this:
div.container {
max-width: 200px;//real picture size
max-height: 100px;
}
/* resize images */
div.container img {
width: 100%;
height: auto;
}
image_tag("/icons/icon.gif", height: '32', width: '32')
I need to set height: '50px', width: '50px' to image tag and this code works from first try note I tried all the above code but no luck so this one works and here is my code from my _nav.html.erb:
<%= image_tag("#{current_user.image}", height: '50px', width: '50px') %>