As part of a project redesigning the Kurzgesagt home page, I encountered a challenge when trying to make my a tag stretch the full height of my img. The a tag was wrapping the img in the HTML code.
Below is the code I used:
HTML
<a href="http://kurzgesagt.org/work/bitdefender/">
<img src="images/happyDevices.png">
</a>
CSS
a {
height: auto;
}
img {
width: 24.8%;
height: 24.8%;
margin: 0;
display: inline-block;
}
If you want to adjust the size of an anchor tag containing an image, you can set a specific width and display property using CSS:
a {
width: 24.8%;
display: inline-block;
}
img {
margin: 0;
width: 100%;
display: block;
}
Here's a helpful fiddle to demonstrate the solution: https://jsfiddle.net/h2qkfc4e/
Make sure the image has display: block; assigned to it:
a {
height: auto;
}
img {
width: 24.8%;
height: 24.8%;
margin: 0;
display: block;
}<a href="http://example.com">
<img src="images/pic.jpg">
</a>To ensure responsiveness, you may want to apply max-width: 100% and max-height: 100%.
Similar Question: Transparent rounded corners on Google Map Despite trying various style sheet properties tailored for different browsers, I'm still unable to achieve the desired effect. Is there a special technique or hack to make this work? I r ...
After clicking a button, I included the following jQuery code in a code snippet on my WordPress site: jQuery("#cf_course_planner tr").css("background-color", "#f66"); jQuery("#cf_course_planner tr:eq(0)").css(& ...
My application features a PNG image with actual dimensions of 300px X 300px. I am using a 20% scale of this image as an input image button, which displays correctly in Mozilla and Chrome browsers. However, in IE, the image appears distorted. Please refer t ...
Need help with scrolling after running code function scrollFunction() { document.getElementById('insert').scrollIntoView(); } I have a button that triggers some code and I want the page to scroll afterwards. Currently, it scroll ...
My presentation was created using Adobe Presenter and inserted via an iframe with autoplay enabled upon publication. This means that as soon as the page loads, the presentation begins automatically along with the audio. Since I am unable to disable autopl ...
I have successfully implemented a drop-down menu with the following code: // Creating a select element for priority within a form in the bottom row div const formPriority = document.createElement("select"); formPriority.setAttribute("name","project"); form ...
Trying to incorporate react-datepicker into a meteor 1.3 and react project has been quite successful so far. The only issue I am facing is the inability to access any of the css styles from the package. According to the readme, I'm supposed to requir ...
This morning, I dedicated a significant amount of time to finding a solution for assigning multiple values to an entity on my form. The scenario is as follows: I have an Entity named QualityData that can have various MechanismIdentifiers. After brainstor ...
I came across an interesting typewriter effect implementation using CSS in an article on CSS Tricks I decided to play around with it and see if I could apply it to a hero image, which I found an example of on Codepen However, I noticed that the blinking ...
One interesting feature I've observed in various web-based email providers is the ability to add the website as the default mailto links handler in browsers like Firefox and Chrome. This means that when clicking on a mailto: link, it will automaticall ...
Is there a way to extract the first cell from a row when a user hovers over it and then clicks a specific key combination? (considering using jQuery) I have a table set up similarly where placing the mouse over a tr and pressing ctrl+c will copy the ID t ...
I am struggling to position a set of circles around a parent div in my code. I want 6 circles to form a circle around the parent div, but they are not lining up correctly. Can someone help me identify what I'm doing wrong? var div = 360 / 6; var ra ...
I'm currently facing a challenge regarding the presence of an additional "0" box on my multiplication table. Below is the code that I have been working with: $cols = 10; $rows = 10; $number = 0; $number2 = 0; echo "<table border=\"1\"> ...
Can jquery sliding functions be used to partially show and hide content? In this scenario, there is a list with 7 items but only the first two are visible initially, while the rest are hidden. The goal is to have all 7 items show when the user clicks to v ...
I recently encountered an issue with a script that needs modification to display different divs based on search criteria. Originally, I used this script for a contact list but now need it to perform another function. View the original code (JSFiddle) Here ...
Does anyone know of a simple method to create a fading effect for a CSS border-bottom when hovering over an image, and then have the border fade out once the hover is removed? <div class="hover"> <img src="images/ex.jpg"/> </div> ...
<?php // Select all entries from the menu table $sql1 = $pardConfig->prepare("SELECT id, menu_title, menu_link, parent FROM pard_menu ORDER BY parent, sort, menu_title"); // Create a multidimensional array to conatin a list of items and parents $sql1 ...
Struggling to retrieve data from mongoDB and send it to the client side using res, but I keep getting undefined. Can anyone offer some assistance? Thank you all! //// server.js app.get('/user/show', userController.userList); //// controller cons ...
Trying to find a way to display a company logo in an email signature without it being blocked by default on different email clients. Initially, I attempted uploading the image to the company website, but encountered the following error: So, I decided to t ...
Is there a way to read and open a file, but update a specific value within it? For example, if my data.txt looks like: [ {"slot": "1", "name": "Bob"}, {"slot": "2", "name": "John"} ] and I want to update it with a query like: "UPDATE data.txt SET na ...