Struggling with adjusting the image dimensions on my HTML and CSS page

<div class="profile">
  <img src="image/JaeHeadShot.jpg" alt="Head Shot"/>
  <h1> Jae Hong </h1>
</div>

.profile{
  border: 2px solid rgba(0,0,0,0.3);
  text-align:center;
  padding: 30px;
}
img.profile{
  width:423;
  height:281;
}

Having some issues with my HTML and CSS here. When trying to resize the image through CSS, I'm encountering some problems. However, directly specifying the width and height attributes in the HTML seems to work fine.

<img src="image/JaeHeadShot.jpg" alt="headshot" width="423" height="281"/>

If anyone has any insights on why this is happening or how to fix it within the CSS, your help would be greatly appreciated!

htmlcssimage

Answer №1

The selector img.profile is unable to target the image because it does not have a profile class, and the dimensions are lacking units.

To correctly style the image, use the following CSS:

img {
    width: 423px;
    height: 281px;
}

Answer №2

The profile class is specifically designed for the div element, not for the image itself.

img.profile{
  width:423;
  height:281;
}

If you wish to apply special styling to the image, you should create a separate class for it.

.myImage{ width: 423px; height: 281px}

You can then use this class within the image tag like so:

<img src="image/JaeHeadShot.jpg" alt="headshot" class=".myImage"/>

Answer №3

Your code is missing the class attribute for the image element, so trying to access it with a class selector like "profile" will not work. Instead, you can target the image directly by using its tag name and applying CSS styles like this: 

img {
 width:423px;
 height:281px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extract content within Python pre tags

A Python code snippet is being used to extract content between PRE tags: s = br.open(base_url+str(string)) u = br.geturl() seq = br.open(u) blat = BeautifulSoup(seq) for res in blat.find('pre').findChildren(): seq = res.string ...

pythonhtmlparsingbeautifulsouppre

Unsuitable Size of Bootstrap Table Row

https://i.sstatic.net/swXci.png I'm struggling with formatting a table using Bootstrap. Despite checking the code multiple times, I can't figure out why it's not displaying correctly. <table class="table table-striped table-bordered"> ...

htmlcsstwitter-bootstrap

Why is it that when I click outside of the <html> element, the click event bound to the <html> element is triggered?

const html = document.querySelector('html') const body = document.querySelector('body') body.onclick = () => { console.log('body clicked') } html.onclick = () => { console.log('html clicked') } document. ...

javascripthtmlbrowser

Ways to position a DIV on the right side of the screen using percentage margin to adjust its distance from the edge as the browser is resized

Allow me to provide a clearer explanation here: Imagine an element placed on a webpage with a margin of 10% from the left side. When the size of the page is adjusted, the margin on the left decreases accordingly - for example, 10% from 1400px - 140px, and ...

htmlcssresponsive-design

Tips for eliminating double quotes from an input string

I am currently developing an input for a website that will generate a div tag along with its necessary child elements to ensure the website functions correctly. I have a couple of key questions regarding this setup: <!DOCTYPE html> <html> < ...

javascriptjqueryhtml

Tips for achieving proper styling and formatting of elements in jQuery UI

I've encountered an issue when trying to use jQuery UI after downloading it multiple times. In the examples provided with the download, the UI elements appear perfectly formatted, but when I implement them on my own pages, the styles and formatting ge ...

javascripthtmljquery-uiasp.net

Tips on applying a class to a host element using @hostbinding in Angular 2

I've been wanting to assign a class to the host element of my component, and initially I used the host property in this manner: @Component({ selector: 'left-bar', host: { 'class': 'left-bar' }, templateUrl: 'a ...

csstypescriptangular

The issue of the Facebook like button not appearing may be due to the sequence in which FB.getLoginStatus() is being

After following the instructions on Facebook's site (http://developers.facebook.com/docs/reference/plugins/like/) to add a basic like button to my website using HTML5, XFBML, and iFrame methods without success, I suspected there may be an issue with m ...

facebookhtmlfacebook-likefacebook-javascript-sdk

What is the best way to center align the div container horizontally?

Trying to center the #container but all methods have failed. How can I achieve centering using only CSS? body { text-align:center; } <div id="app"> <div id="container"><div id="container_red" style="position:absolute;left:0"> ...

css

Adjust Element Width Based on Scroll Position

I'm attempting to achieve a similar effect as seen here: (if it doesn't work in Chrome, try using IE). This is the progress I've made so far: http://jsfiddle.net/yuvalsab/op9sg2L2/ HTML <div class="transition_wrapper"> <div ...

javascriptjqueryhtmlcss

Troubleshooting unexpected issues with dynamically updating HTML using innerHTML

Need help with a renderWorkoutUpdated function that replaces specific workout records with updated values. _renderWorkoutUpdated(currentWorkout) { let html = `<li class="workout workout--${currentWorkout.type}" data-id="${ curre ...

javascripthtmlinnerhtml

Arrange multiple divs on top of each other by utilizing the Bootstrap flexbox system

Apologies for my lack of experience with Bootstrap, specifically version 4.0. I have been researching extensively but am struggling to accomplish the simple task of stacking two divs on top of each other. <div class="d-flex flex-column"> <div ...

cssbootstrap-4flexbox

Issue with Fluid Square Divs and Box-Sizing

I'm currently working on creating a responsive fluid div that maintains its square shape as the page is resized. I've come across a method that involves using the following CSS code: div{ width:25% padding-bottom:25%; } However, it seem ...

htmlcss

.Net RadioButton object

Having trouble styling my radio button. When I compile and check the code with Firebug, something unusual happens. Code snippet: <asp:RadioButton ID="selType1" GroupName="Type" runat="server" CssClass="radioB" Checked="true" /> Firebug result: & ...

.netasp.netcss

Mouse click failing to trigger CSS property update

I am attempting to create an accordion feature. I want the accordion to expand when hovering over the "accordion head," and also show/hide the accordion body when clicking on the "accordion head." I have successfully implemented the show/hide functionalit ...

javascriptjqueryhtmlcss

How can I add a label to a button group created with Bootstrap?

The Nu HTML checker is throwing an error The value of the for attribute of the label element must be the ID of a non-hidden form control. <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> & ...

htmlformstwitter-bootstrapbootstrap-4

`At a loss: jQuery failing to retrieve JSON data`

I'm having trouble with a basic script that is supposed to fetch data from a JSON feed and display it in an alert. Despite having loaded jQuery correctly and checked for common issues, the code doesn't seem to be working. I am using jQuery and ca ...

phpjavascriptjqueryhtmljson

Steps for resetting a div's display after adjusting the device size

I have a code that displays horizontally on desktop screens and vertically on phones. It includes an x button (closebtn) that is only displayed on phones to close the menu bar. How can I automatically display it again after resizing the page back to deskto ...

javascripthtmlcssresponsive-design

Is there a way to configure the positioning of Bootstrap carousel thumbnails to be above and beside?

My goal is to customize a bootstrap 5 thumbnails carousel by placing the thumbnails either on the top or the left side of the slides section. The default setting is at the bottom, but I need these two variations. The base model works perfectly, but I' ...

csstwitter-bootstrapcarouselbootstrap-5

Creating a responsive design with dual backgrounds using Tailwind CSS

I have a design in Figma that I want to convert to React using Tailwind CSS while maintaining 100% pixel-perfect accuracy. The design is created for a Macbook Pro 16 inch, which has a width of 1728px. However, I want to center the content within a customiz ...

cssreactjsresponsive-designtailwind-csstailwind-in-js