Search the Community

Hello, How may I use the <picture> tag to change the sizing of a (background or other) image depending on the device size? For example, let's say the current CSS is: .bgimg { background-position: center; background-size: cover; background-image: url("img/large.jpg"); min-height: 75%; } So rather than using the W3C code of: <!-- Header with image --> <header class="bgimg w3-display-container w3-grayscale-min" id="home"> Instead it would look something like this: <!-- Header with image --> <header id="home" class="w3-display-container w3-grayscale-min"> <div> <picture> <source media="(min-width: 1501px)" background-image="img/large.jpg" style="background-position:center, width:2000px;"> <source media="(min-width: 601px)" background-image="img/medium.jpg" style="width:1500px"> <img background-image="img/small.jpg" alt="picture" style="width:600px"> </picture> </div> Ultimately, my goal is this: 1. to specify the width and height for each image 2. have the picture change depending on the device size 3. have the image also cover the available container size to 100% width Any help would be hugely appreciated. Kind regards

Hey, sorry for the stupid question, but when i use this: <picture> <source srcset="imgage.webp" type="image/webp"> <img src="/image.png"/></picture> The browser that supports both will load both or just the webp? Thank you.

im trying to use the code provided in the w3school's responsive image gallery (https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive) and the basic code works but when i substitute any of the pictures for a portrait rather than a landscape it rotates the portrait image 90 degrees so that it ends up landscape... i am using the exact same code with the exceptions of the images im trying to use

I have gallery that generates dynamically from CMS (ModX). There is a 'title' property for each picture. And there is also a lightbox plugin (Magnific Popup) for the gallery that is written in JS which works normally, but I cannot display those titles as captions for each popup image. ('titlesrc' property of the plugin does not take captions from titles of images) Here's what I've added to the plugin file, but it works only after an image is increased (just once), but does not work when I click on the arrow buttons to slide through the images: document.onclick = myClickHandler; function myClickHandler (e) { document.getElementsByClassName("mfp-title")[0].innerHTML = e.target.parentElement.getAttribute('title'); } So I need either to add an event listener for arrow buttons inside the lightbox to change the particular title each time a picture is changed or initially to make the 'titleSrc' property work normally so to display a caption from the 'title' of an image. Would be very glad if someone could help me with the task!

I'm a student, and currently busy with creating my own website, but now I've got a question which I can't figure out myself. My website is about professional cycling and on it I'll have the jerseys of the teams which I want to overlay when going over it with the mouse. I figured this out OK, but now it happens that if I move over it with my mouse, a big square overlays the picture (because it's a square picture with a transparent background) and I want that there is only an overlay over the jersey and not over the "background" of the picture. I hope you can help me! Need to fix this! Thank you in advance! .container { position: relative; width: 25%; height: auto; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: #00b0f0; opacity: 0.8; overflow: hidden; width: 100%; height: 0; transition: .5s ease; } .container:hover .overlay { height: 100%; } .text { white-space: nowrap; color: white; font-size: 20px; position: absolute; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } <div class="container"> <a href="AG2R.html"> <img src="https://i.stack.imgur.com/7839q.png" alt="AG2R La Mondiale" title="AG2R La Mondiale" class="image"> </a> <div class="overlay"> <div class="text">AG2R La Mondiale</div> </div> </div> This is the picture I used:

Hello so I made an array and it works fine when you refresh the page the image changes but at lower screen resolutions the image cuts of the edge. With my basic code it worked fine I was wondering what I was doing wrong. This was my old code which was just one image and at lower resolutions it would still fit on the screen <center><img src="my image url" width=47%> </center> But when I use my array it cuts of I want to make the image center and just put width=47% like the top code but not sure where to put it <script language="JavaScript"><!--function random_imglink(){var myimages=new Array()myimages[1]="my image url"myimages[2]="my image url"myimages[3]="my image url"myimages[4]="my image url"myimages[5]="my image url"myimages[6]="my image url"var ry=Math.floor(Math.random()*myimages.length)if (ry==0)ry=1document.write('<img src="'+myimages[ry]+'" width=47%')}random_imglink()//--></script> If you could help me it would be much appreciated

please i respect and appreciate this forum, am working on a project that needed people to upload picture which will go with a thumbnail, i have all that working but i really wish i could resize the picture to fixes Max. Height and a Max width, what i mean is that i want the pictures not to exceed some certin fixed height or weight. these are my codes all working fyn but i need help on how to fix the order. thanks as you input ur blessed efforts <?phpdefine('UPLOADED_IMAGE_DESTINATION', 'uploads/');define('PROCESSED_IMAGE_DESTINATION', 'logo/');function process_image_upload($Field){ $temp_file_path = $_FILES[$Field]['tmp_name']; $temp_file_name = $_FILES[$Field]['name']; list(, , $temp_type) = getimagesize($temp_file_path); if ($temp_type === NULL) { return false; } switch ($temp_type) { case IMAGETYPE_GIF: break; case IMAGETYPE_JPEG: break; case IMAGETYPE_PNG: break; default: return false; } $uploaded_file_path = UPLOADED_IMAGE_DESTINATION . $temp_file_name; $processed_file_path = PROCESSED_IMAGE_DESTINATION . preg_replace('/.[^.]+$/', '.jpg', $temp_file_name); move_uploaded_file($temp_file_path, $uploaded_file_path); /* * PARAMETER DESCRIPTION * (1) SOURCE FILE PATH * (2) OUTPUT FILE PATH * (3) THE TEXT TO RENDER * (4) FONT NAME -- MUST BE A *FILE* NAME * (5) FONT SIZE IN POINTS * (6) FONT COLOR AS A HEX STRING * (7) OPACITY -- 0 TO 100 * (8) TEXT ANGLE -- 0 TO 360 * (9) TEXT ALIGNMENT CODE -- POSSIBLE VALUES ARE 11, 12, 13, 21, 22, 23, 31, 32, 33 */ $result = create_watermark_from_string( $uploaded_file_path, $processed_file_path, 'www.hirectory.com.', 'Arial.ttf', 40, 'CCCCCC', 75, 45, 22 ); if ($result === false) { return false; } else { return array($uploaded_file_path, $processed_file_path); }}/* * Here is how to call the function(s) */$result = process_image_upload('File1');if ($result === false) { echo '<br>An error occurred during file processing.';} else { echo '<br>Original image saved as <a href="' . $result[0] . '" target="_blank">' . $result[0] . '</a>'; echo '<br>Watermarked image saved as <a href="' . $result[1] . '" target="_blank">' . $result[1] . '</a>';}?><form action="" method="post" enctype="multipart/form-data">Select a file to upload for processing<br><input type="file" name="File1"><br><input type="submit" value="Submit File"></form>

Hello! I am currently in the progress of building a map, using GPS data points. I have been gathering information about each specific point I plot using the GPS Device. When I export my work into Google Earth, I can click on a point and see a pop-up menu that displays the information gathered about that specific point. I am looking at possibly writing my own XSLT/XSL Template in order to display the information properly. Aside from internet research (Mostly here at W3 Schools), I have no training on XSL and XSLT. I've played around with it, hoping for blind luck, but to no avail. Does anyone have suggestions as far as learning tools, or where to get a solid understanding of what I need to know in order to convert database information into a formatted html table? Also, I need to incorporate thumbnail images in this pop-up menu, generally from the same file path, just different end folders. Any advice or suggestions would be much appreciated. Thank you!

Well hello there, fellow coders/programmers.I am working on a social website for smokers of denmark to gather and share their pictures of different crops, etc.The problem is, cannabis is not strictly legal in denmark.And since it cant be expected that the average user on our site knows how to deactivate geotagging, i wanna make an option that does it for them, making sure that the popos dont trace their grows through our website.Problem is, this is kind of over my level of expertise.Currently i am just referring people to use this site: http://www.verexif.com/en/ before uploading, but having either this function, or the behind coding doing it automatically, would be completely awesome.i have also found a discussion in the wordpress support forum, but i cant get what theyre writing to work. http://wordpress.org/support/topic/remove-automatic-exif-titles-for-uploadsIf any of you would take the time to give it a go, i would be forever grateful ;)Heck, i might even send you a present

Well hello there, fellow coders/programmers.I am working on a social website for smokers of denmark to gather and share their pictures of different crops, etc.The problem is, cannabis is not strictly legal in denmark.And since it cant be expected that the average user on our site knows how to deactivate geotagging, i wanna make an option that does it for them, making sure that the popos dont trace their grows through our website.Problem is, this is kind of over my level of expertise.Currently i am just referring people to use this site: http://www.verexif.com/en/ before uploading, but having either this function, or the behind coding doing it automatically when uploading, directly on our site, would be completely awesome.i have also found a discussion in the wordpress support forum, but i cant get what theyre saying to work. http://wordpress.org/support/topic/remove-automatic-exif-titles-for-uploadsIf any of you would take the time to give it a go, i would be forever grateful ;)Heck, i might even send you a present :PEdit: I fear this might have been misplaced in PHP. Any admin, feel free to move my thread to a more suiting forum

Hello W3S people again. once again im in a little need of help. at least to get it started, im a little lost in this matter...im in the half-way exams at this week. and we got told to make a admin system that could upload images to products... that part i (CAN) do...but here comes my problem... i dont know the part of resizing the images...any ideas or suggestions would be pretty awsome! and thats not for kidding...i just need a little help for the beginning of it, so i can see the syntax... Hoping answers or suggestions soon!... thanks alot in advance! .